@digdir/designsystemet 1.13.2 → 1.13.3

package/dist/src/tokens/process/utils/kebab-case.js

@@ -1,7 +1,9 @@
-// src/tokens/process/utils/kebab-case.ts
+//#region src/tokens/process/utils/kebab-case.ts
+/**
+* Function to convert a string to kebab-case.
+*/
 function kebabCase(str) {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+	return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 }
-export {
-  kebabCase
-};
+//#endregion
+export { kebabCase };

package/dist/src/tokens/types.js

@@ -1,8 +1,7 @@
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-export {
-  colorCategories
+//#region src/tokens/types.ts
+const colorCategories = {
+	main: "main",
+	support: "support"
 };
+//#endregion
+export { colorCategories };

package/dist/src/tokens/utils.js

@@ -1,112 +1,121 @@
-// src/tokens/utils.ts
+import { colorCategories } from "./types.js";
 import * as R from "ramda";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/utils.ts
-var mapToLowerCase = R.map(R.toLower);
-var hasAnyTruth = R.any(R.equals(true));
-var getType = (token) => (token.$type ?? token.type) || "";
-var getValue = (token) => token.$value ?? token.value;
-var typeEquals = R.curry(
-  (types, token) => {
-    if (R.isNil(token)) {
-      return false;
-    }
-    return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
-  }
-);
-var pathStartsWithOneOf = R.curry(
-  (paths, token) => {
-    if (R.isNil(token)) {
-      return false;
-    }
-    const tokenPath = mapToLowerCase(token.path);
-    const matchPathsStartingWith = R.map((pathOrString) => {
-      const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
-      return R.startsWith(mapToLowerCase(path), tokenPath);
-    }, paths);
-    return hasAnyTruth(matchPathsStartingWith);
-  }
-);
+//#region src/tokens/utils.ts
+const mapToLowerCase = R.map(R.toLower);
+const hasAnyTruth = R.any(R.equals(true));
+/**
+* Returns type based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
+* @param token Transformed token
+* @returns type
+*/
+const getType = (token) => (token.$type ?? token.type) || "";
+/**
+* Returns value based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
+*
+* Use generic (`<T>`) to define return value type
+* @param token Transformed or Design token
+* @returns value
+*/
+const getValue = (token) => token.$value ?? token.value;
+/**
+* Check if token type matches provided type
+* This function is curried
+* @param types Type or array of types to check against
+* @param token Transformed token
+* @returns boolean
+*/
+const typeEquals = R.curry((types, token) => {
+	if (R.isNil(token)) return false;
+	return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
+});
+const pathStartsWithOneOf = R.curry((paths, token) => {
+	if (R.isNil(token)) return false;
+	const tokenPath = mapToLowerCase(token.path);
+	return hasAnyTruth(R.map((pathOrString) => {
+		const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
+		return R.startsWith(mapToLowerCase(path), tokenPath);
+	}, paths));
+});
 function isSemanticToken(token) {
-  return token.filePath.includes("semantic/");
+	return token.filePath.includes("semantic/");
 }
 function isSemanticColorToken(token, color) {
-  return token.filePath.includes("semantic/") && R.startsWith(["color", color], token.path);
+	return token.filePath.includes("semantic/") && R.startsWith(["color", color], token.path);
 }
 function isGlobalColorToken(token) {
-  return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
+	return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
 }
 function isColorCategoryToken(token, category) {
-  if (!category) {
-    return Object.keys(colorCategories).some(
-      (colorCategory) => isColorCategoryToken(token, colorCategory)
-    );
-  }
-  return R.startsWith(["color", category], token.path);
+	if (!category) return Object.keys(colorCategories).some((colorCategory) => isColorCategoryToken(token, colorCategory));
+	return R.startsWith(["color", category], token.path);
 }
-var isDigit = (s) => /^\d+$/.test(s);
+const isDigit = (s) => /^\d+$/.test(s);
+/** Copied from Style Dictionary and added types
+@see https://github.com/amzn/style-dictionary/blob/31c29df0382a61b085f6392dc3225c5009fbffc5/lib/utils/combineJSON.js#L33 */
 function traverseObj(obj, fn) {
-  for (const key in obj) {
-    const prop = obj[key];
-    if (prop != null) {
-      fn.apply(null, [obj, key, prop]);
-      if (typeof prop === "object") {
-        traverseObj(prop, fn);
-      }
-    }
-  }
-  return obj;
+	for (const key in obj) {
+		const prop = obj[key];
+		if (prop != null) {
+			fn.apply(null, [
+				obj,
+				key,
+				prop
+			]);
+			if (typeof prop === "object") traverseObj(prop, fn);
+		}
+	}
+	return obj;
 }
+/**
+* In the given tokens array, inline and remove tokens that match the predicate
+*
+* Example: In pseudo-code, given the predicate `(token) => token.path === ['size', '1']` and the following tokens
+* ```js
+*  [
+*    { path: ['size', 'base'], original: { $value: '8px' } },
+*    { path: ['size', '1'], original: { $value: '{size.base} * 2' } },
+*    { path: ['size', 'sm']: original: { $value: 'min({size.1}, 12px)' } }
+*  ]
+* ```
+* would return
+* ```js
+*  [
+*    { path: ['size', 'base'], original: { $value: '8px' } },
+*    { path: ['size', 'sm']: original: { $value: 'min({size.base} * 2, 12px)' } }
+*  ]
+* ```
+*
+* @param shouldInline - predicate to determine if token should be inlined
+* @param tokens - array of tokens to transform
+* @returns copy of `tokens` without those that matched the predicate,
+*          where references to the matching tokens have been inlined
+*/
 function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
-  return otherTokens.map((token) => {
-    let transformed = getValue(token.original);
-    for (const ref of inlineableTokens) {
-      const refName = ref.path.join(".");
-      if (typeof transformed === "string") {
-        transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
-      }
-    }
-    const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
-    return tokenWithInlinedRefs;
-  });
+	const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
+	return otherTokens.map((token) => {
+		let transformed = getValue(token.original);
+		for (const ref of inlineableTokens) {
+			const refName = ref.path.join(".");
+			if (typeof transformed === "string") transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
+		}
+		return R.set(R.lensPath(["original", "$value"]), transformed, token);
+	});
 }
-var sizeMap = {
-  xsmall: "xs",
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  xlarge: "xl"
+const sizeMap = {
+	xsmall: "xs",
+	small: "sm",
+	medium: "md",
+	large: "lg",
+	xlarge: "xl"
 };
 function shortSizeName(size) {
-  return sizeMap[size] ?? size;
+	return sizeMap[size] ?? size;
 }
-var sizeComparator = (size) => {
-  const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size || val === size);
-  return sortIndex ?? 0;
+const sizeComparator = (size) => {
+	return Object.entries(sizeMap).findIndex(([key, val]) => key === size || val === size) ?? 0;
 };
 function orderBySize(sizes) {
-  return R.sortBy(sizeComparator, sizes);
+	return R.sortBy(sizeComparator, sizes);
 }
-export {
-  getType,
-  getValue,
-  inlineTokens,
-  isColorCategoryToken,
-  isDigit,
-  isGlobalColorToken,
-  isSemanticColorToken,
-  isSemanticToken,
-  orderBySize,
-  pathStartsWithOneOf,
-  shortSizeName,
-  sizeComparator,
-  traverseObj,
-  typeEquals
-};
+//#endregion
+export { getType, getValue, inlineTokens, isColorCategoryToken, isDigit, isGlobalColorToken, isSemanticColorToken, isSemanticToken, orderBySize, pathStartsWithOneOf, shortSizeName, sizeComparator, traverseObj, typeEquals };

package/dist/src/types.js

@@ -1,6 +1,2 @@
-// src/types.ts
 export * from "@digdir/designsystemet-types";
-/*!
- * This file is deprecated and will be removed in a future release.
- * Use @digdir/designsystemet-types instead
- */
+export {};

package/dist/src/utils/filesystem.js

@@ -1,127 +1,115 @@
-// src/utils/filesystem.ts
-import fs from "fs/promises";
-import path from "path";
 import pc from "picocolors";
+import fs from "node:fs/promises";
+import path from "node:path";
+//#region src/utils/filesystem.ts
 var FileSystem = class {
-  isInitialized = false;
-  dry = false;
-  verbose = false;
-  /** Default working directory is where the process was started */
-  workingDir = process.cwd();
-  outDir = this.workingDir;
-  /** Initialize the file system */
-  init({ dry, outdir, verbose }) {
-    if (this.isInitialized) {
-      console.warn(pc.yellow("FileSystem is already initialized. Ignoring subsequent init call."));
-      return;
-    }
-    if (dry) {
-      console.log(pc.blue("Initializing FileSystem in dry-run mode. No files will be written."));
-    }
-    this.dry = dry ?? false;
-    this.verbose = verbose ?? false;
-    this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
-    if (this.verbose) {
-      console.log(
-        `FileSystem initialized with workingDir: ${pc.green(this.workingDir)}, outDir: ${pc.green(this.outDir)}`
-      );
-    }
-    this.isInitialized = true;
-  }
-  /**
-   * Creates a directory if it does not already exist.
-   *
-   * @param dir - The path of the directory to create.
-   *
-   * @returns A promise that resolves when the operation is complete.
-   * If the directory already exists or `dry` is `true`, the promise resolves immediately.
-   */
-  mkdir = async (dir) => {
-    if (this.dry) {
-      console.log(`${pc.blue("mkdir")} ${dir}`);
-      return Promise.resolve();
-    }
-    const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
-    if (exists) {
-      return Promise.resolve();
-    }
-    return fs.mkdir(dir, { recursive: true });
-  };
-  writeFile = async (path2, data) => {
-    if (this.dry) {
-      console.log(`${pc.blue("writeFile")} ${path2}`);
-      return Promise.resolve();
-    }
-    return fs.writeFile(path2, data, { encoding: "utf-8" }).catch((error) => {
-      console.error(pc.red(`Error writing file: ${path2}`));
-      console.error(pc.red(error));
-      throw error;
-    });
-  };
-  cp = async (src, dest, filter) => {
-    if (this.dry) {
-      console.log(`${pc.blue("cp")} ${src} ${dest}`);
-      return Promise.resolve();
-    }
-    return fs.cp(src, dest, { recursive: true, filter });
-  };
-  copyFile = async (src, dest) => {
-    if (this.dry) {
-      console.log(`${pc.blue("copyFile")} ${src} to ${dest}`);
-      return Promise.resolve();
-    }
-    return fs.copyFile(src, dest);
-  };
-  cleanDir = async (dir) => {
-    if (this.dry) {
-      console.log(`${pc.blue("cleanDir")} ${dir}`);
-      return Promise.resolve();
-    }
-    console.log(`
-\u{1F525} Cleaning dir ${pc.red(`${dir.trim()}`)} `);
-    return fs.rm(dir, { recursive: true, force: true });
-  };
-  readFile = async (path2, allowFileNotFound) => {
-    if (this.dry) {
-      console.log(`${pc.blue("readFile")} ${path2}`);
-    }
-    try {
-      return await fs.readFile(path2, "utf-8");
-    } catch (error) {
-      if (allowFileNotFound && error.code === "ENOENT") {
-        return "";
-      }
-      throw error;
-    }
-  };
-  readdir = async (path2) => {
-    if (this.dry) {
-      console.log(`${pc.blue("readdir")} ${path2}`);
-    }
-    try {
-      return await fs.readdir(path2);
-    } catch (error) {
-      if (error.code === "ENOENT") {
-        return [];
-      }
-      throw error;
-    }
-  };
-  writeFiles = async (files, outDir, log) => {
-    for (const { destination: filename, output } of files) {
-      if (filename) {
-        const filePath = path.join(outDir, filename);
-        const fileDir = path.dirname(filePath);
-        if (log) {
-          console.log(filename);
-        }
-        await this.mkdir(fileDir);
-        await this.writeFile(filePath, output);
-      }
-    }
-  };
-};
-var dsfs = new FileSystem();
-export {
-  dsfs
+	isInitialized = false;
+	dry = false;
+	verbose = false;
+	/** Default working directory is where the process was started */
+	workingDir = process.cwd();
+	outDir = this.workingDir;
+	/** Initialize the file system */
+	init({ dry, outdir, verbose }) {
+		if (this.isInitialized) {
+			console.warn(pc.yellow("FileSystem is already initialized. Ignoring subsequent init call."));
+			return;
+		}
+		if (dry) console.log(pc.blue("Initializing FileSystem in dry-run mode. No files will be written."));
+		this.dry = dry ?? false;
+		this.verbose = verbose ?? false;
+		this.outDir = outdir ? path.isAbsolute(outdir) ? outdir : path.join(this.workingDir, outdir) : this.workingDir;
+		if (this.verbose) console.log(`FileSystem initialized with workingDir: ${pc.green(this.workingDir)}, outDir: ${pc.green(this.outDir)}`);
+		this.isInitialized = true;
+	}
+	/**
+	* Creates a directory if it does not already exist.
+	*
+	* @param dir - The path of the directory to create.
+	*
+	* @returns A promise that resolves when the operation is complete.
+	* If the directory already exists or `dry` is `true`, the promise resolves immediately.
+	*/
+	mkdir = async (dir) => {
+		if (this.dry) {
+			console.log(`${pc.blue("mkdir")} ${dir}`);
+			return Promise.resolve();
+		}
+		if (await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false)) return Promise.resolve();
+		return fs.mkdir(dir, { recursive: true });
+	};
+	writeFile = async (path, data) => {
+		if (this.dry) {
+			console.log(`${pc.blue("writeFile")} ${path}`);
+			return Promise.resolve();
+		}
+		return fs.writeFile(path, data, { encoding: "utf-8" }).catch((error) => {
+			console.error(pc.red(`Error writing file: ${path}`));
+			console.error(pc.red(error));
+			throw error;
+		});
+	};
+	cp = async (src, dest, filter) => {
+		if (this.dry) {
+			console.log(`${pc.blue("cp")} ${src} ${dest}`);
+			return Promise.resolve();
+		}
+		return fs.cp(src, dest, {
+			recursive: true,
+			filter
+		});
+	};
+	copyFile = async (src, dest) => {
+		if (this.dry) {
+			console.log(`${pc.blue("copyFile")} ${src} to ${dest}`);
+			return Promise.resolve();
+		}
+		return fs.copyFile(src, dest);
+	};
+	cleanDir = async (dir) => {
+		if (this.dry) {
+			console.log(`${pc.blue("cleanDir")} ${dir}`);
+			return Promise.resolve();
+		}
+		console.log(`\n🔥 Cleaning dir ${pc.red(`${dir.trim()}`)} `);
+		return fs.rm(dir, {
+			recursive: true,
+			force: true
+		});
+	};
+	readFile = async (path, allowFileNotFound) => {
+		if (this.dry) console.log(`${pc.blue("readFile")} ${path}`);
+		try {
+			return await fs.readFile(path, "utf-8");
+		} catch (error) {
+			if (allowFileNotFound && error.code === "ENOENT") return "";
+			throw error;
+		}
+	};
+	readdir = async (path) => {
+		if (this.dry) console.log(`${pc.blue("readdir")} ${path}`);
+		try {
+			return await fs.readdir(path);
+		} catch (error) {
+			if (error.code === "ENOENT") return [];
+			throw error;
+		}
+	};
+	writeFiles = async (files, outDir, log) => {
+		for (const { destination: filename, output } of files) if (filename) {
+			const filePath = path.join(outDir, filename);
+			const fileDir = path.dirname(filePath);
+			if (log) console.log(filename);
+			await this.mkdir(fileDir);
+			await this.writeFile(filePath, output);
+		}
+	};
 };
+/**
+* An abstraction of Node's file system API and helper functions for Designsystemet CLI interaction with the file system.
+*
+* Allows dry-running destructive operations, logging and store relevant file system state.
+*/
+const dsfs = new FileSystem();
+//#endregion
+export { dsfs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "engines": {
@@ -15,8 +15,7 @@
   "type": "module",
   "main": "./dist/src/index.js",
   "files": [
-    "./dist/**",
-    "./configs/**"
+    "./dist/**"
   ],
   "bin": "dist/bin/designsystemet.js",
   "exports": {
@@ -51,7 +50,7 @@
     "style-dictionary": "^5.4.0",
     "zod": "^4.3.6",
     "zod-validation-error": "^5.0.0",
-    "@digdir/designsystemet-types": "1.13.2"
+    "@digdir/designsystemet-types": "1.13.3"
   },
   "devDependencies": {
     "@tokens-studio/types": "0.5.2",
@@ -59,25 +58,23 @@
     "@types/node": "24.12.2",
     "@types/object-hash": "3.0.6",
     "@types/ramda": "0.31.1",
-    "tsup": "8.5.1",
+    "tsdown": "0.21.9",
     "tsx": "4.21.0",
     "typescript": "5.9.3"
   },
   "scripts": {
     "designsystemet": "tsx ./bin/designsystemet.ts",
     "designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
-    "build": "tsup && pnpm build:types && pnpm build:json-schema",
+    "build": "tsdown && pnpm build:types && pnpm build:json-schema",
     "build:types": "tsc --emitDeclarationOnly --declaration",
     "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
     "types": "tsc --noEmit",
     "test:tokens-create-options": "pnpm run designsystemet tokens create -m dominant:\"#007682\" -n \"#003333\" -b 99 -o ./temp/options/design-tokens --theme options --clean",
-    "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
-    "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
-    "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
-    "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
-    "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
-    "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
-    "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
+    "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./tests/test-tokens.config.json",
+    "test:tokens-build-options": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
+    "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./tests/config/design-tokens -o ./tests/config/build --clean --experimental-tailwind",
+    "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./tests/config/design-tokens -o ./tests/config/build --clean",
+    "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build-options",
     "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
     "test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../design-tokens --dry",
     "test": "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",

package/configs/test-tokens.config.json

@@ -1,82 +0,0 @@
-{
-  "$schema": "../dist/config.schema.json",
-  "outDir": "./temp/config/design-tokens",
-  "clean": true,
-  "themes": {
-    "some-org": {
-      "colors": {
-        "main": {
-          "dominant": "#0062BA",
-          "complimentary": "#94237C"
-        },
-        "support": {
-          "first": "#F45F63",
-          "second": "#E5AA20",
-          "third": "#1E98F5",
-          "fourth": "#F167EC"
-        },
-        "neutral": "#303030"
-      },
-      "typography": {
-        "fontFamily": "Inter"
-      },
-      "borderRadius": 8,
-      "overrides": {
-        "colors": {
-          "dominant": {
-            "background-default": {
-              "light": "#ff0000",
-              "dark": "#000fff"
-            },
-            "background-tinted": {
-              "light": "#f0ff00",
-              "dark": "#ff00ff"
-            }
-          },
-          "danger": {
-            "background-default": {
-              "light": "#0000ff",
-              "dark": "#0000ff"
-            }
-          }
-        },
-        "severity": {
-          "danger": "#ff00ff"
-        },
-        "linkVisited": {
-          "light": "#ff1234",
-          "dark": "#1234ff"
-        },
-        "focus": {
-          "inner": {
-            "light": "#00ff00",
-            "dark": "#00ffff"
-          },
-          "outer": {
-            "light": "#ffff00",
-            "dark": "#ff00aa"
-          }
-        }
-      }
-    },
-    "other-org": {
-      "colors": {
-        "main": {
-          "dominant": "#ffaaaa",
-          "complimentary": "#00ff00"
-        },
-        "support": {
-          "first": "#abcdef",
-          "second": "#123456",
-          "third": "#994a22",
-          "fourth": "#3d5f30"
-        },
-        "neutral": "#c05030"
-      },
-      "typography": {
-        "fontFamily": "Roboto"
-      },
-      "borderRadius": 99
-    }
-  }
-}