@digdir/designsystemet 1.13.2 → 1.14.0

package/dist/src/tokens/process/output/tailwind.js

@@ -1,37 +1,28 @@
-// src/tokens/process/output/tailwind.ts
-var createTailwindCSSFiles = (cssFiles) => {
-  console.log("\n\u{1F371} Creating Tailwind Config");
-  return cssFiles.map((file) => {
-    if (file.destination) {
-      const tailwindConfig = generateTailwind(file.output);
-      const tailwindFile = {
-        destination: file.destination.replace(".css", ".tailwind.css"),
-        output: tailwindConfig
-      };
-      return tailwindFile;
-    }
-    return void 0;
-  }).filter((item) => item !== void 0);
+//#region src/tokens/process/output/tailwind.ts
+const createTailwindCSSFiles = (cssFiles) => {
+	console.log("\n🍱 Creating Tailwind Config");
+	return cssFiles.map((file) => {
+		if (file.destination) {
+			const tailwindConfig = generateTailwind(file.output);
+			return {
+				destination: file.destination.replace(".css", ".tailwind.css"),
+				output: tailwindConfig
+			};
+		}
+	}).filter((item) => item !== void 0);
 };
-var generateTailwind = (css) => {
-  const tailwind = ["--font-sans: var(--ds-font-family)"];
-  const tokens = Array.from(new Set(css.match(/--ds-[^:)]+/g)), (m) => m).sort(
-    (a, b) => a.localeCompare(b, void 0, { numeric: true, sensitivity: "base" })
-  );
-  for (const token of tokens) {
-    if (token.startsWith("--ds-color-") && !token.startsWith("--ds-color-focus")) {
-      tailwind.push(`--color-${token.replace("--ds-color-", "")}: var(${token})`);
-    } else if (token.startsWith("--ds-font-weight-")) {
-      tailwind.push(`--font-weight-${token.replace("--ds-font-weight-", "")}: var(${token})`);
-    } else if (token.match(/--ds-border-radius-(sm|md|lg|xl)/)) {
-      tailwind.push(`--radius-${token.replace("--ds-border-radius-", "")}: var(${token})`);
-    } else if (token.match(/--ds-body-(sm|mg|lg)-body-font-size/)) {
-      tailwind.push(`--text-${token.replace("--ds-body-", "").replace("-font-size", "")}: var(${token})`);
-    } else if (token.match(/^--ds-size-\d+$/)) {
-      tailwind.push(`--spacing-${token.replace("--ds-size-", "")}: var(${token})`);
-    }
-  }
-  const dynamicColors = `[data-color] {
+const generateTailwind = (css) => {
+	const tailwind = ["--font-sans: var(--ds-font-family)"];
+	const tokens = Array.from(new Set(css.match(/--ds-[^:)]+/g)), (m) => m).sort((a, b) => a.localeCompare(b, void 0, {
+		numeric: true,
+		sensitivity: "base"
+	}));
+	for (const token of tokens) if (token.startsWith("--ds-color-") && !token.startsWith("--ds-color-focus")) tailwind.push(`--color-${token.replace("--ds-color-", "")}: var(${token})`);
+	else if (token.startsWith("--ds-font-weight-")) tailwind.push(`--font-weight-${token.replace("--ds-font-weight-", "")}: var(${token})`);
+	else if (token.match(/--ds-border-radius-(sm|md|lg|xl)/)) tailwind.push(`--radius-${token.replace("--ds-border-radius-", "")}: var(${token})`);
+	else if (token.match(/--ds-body-(sm|mg|lg)-body-font-size/)) tailwind.push(`--text-${token.replace("--ds-body-", "").replace("-font-size", "")}: var(${token})`);
+	else if (token.match(/^--ds-size-\d+$/)) tailwind.push(`--spacing-${token.replace("--ds-size-", "")}: var(${token})`);
+	return `@theme {${tailwind.map((str) => `\n  ${str};`).join("")}\n}\n[data-color] {
       --color-background-default: var(--ds-color-background-default);
       --color-background-tinted: var(--ds-color-background-tinted);
       --color-surface-default: var(--ds-color-surface-default);
@@ -49,11 +40,6 @@ var generateTailwind = (css) => {
       --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
       --color-base-contrast-default: var(--ds-color-base-contrast-default);
     }`;
-  return `@theme {${tailwind.map((str) => `
-  ${str};`).join("")}
-}
-${dynamicColors}`;
-};
-export {
-  createTailwindCSSFiles
 };
+//#endregion
+export { createTailwindCSSFiles };

package/dist/src/tokens/process/output/theme.js

@@ -1,216 +1,83 @@
-// src/tokens/process/output/theme.ts
+import { version } from "../../../../package.js";
+import { sizeComparator } from "../../utils.js";
 import pc from "picocolors";
-import * as R2 from "ramda";
-
-// package.json
-var package_default = {
-  name: "@digdir/designsystemet",
-  version: "1.13.2",
-  description: "CLI for Designsystemet",
-  author: "Designsystemet team",
-  engines: {
-    node: ">=20.20.2"
-  },
-  repository: {
-    type: "git",
-    url: "git+https://github.com/digdir/designsystemet.git"
-  },
-  homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
-  license: "MIT",
-  type: "module",
-  main: "./dist/src/index.js",
-  files: [
-    "./dist/**",
-    "./configs/**"
-  ],
-  bin: "dist/bin/designsystemet.js",
-  exports: {
-    ".": {
-      import: "./dist/src/index.js"
-    },
-    "./color": {
-      import: "./dist/src/colors/index.js"
-    },
-    "./tokens": {
-      import: "./dist/src/tokens/index.js"
-    },
-    "./types": {
-      import: "./dist/src/types.js"
-    }
-  },
-  publishConfig: {
-    access: "public"
-  },
-  scripts: {
-    designsystemet: "tsx ./bin/designsystemet.ts",
-    "designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
-    build: "tsup && 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-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",
-    "update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
-    verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
-  },
-  dependencies: {
-    "@commander-js/extra-typings": "^14.0.0",
-    "@digdir/designsystemet-types": "workspace:",
-    "@tokens-studio/sd-transforms": "2.0.3",
-    "chroma-js": "^3.2.0",
-    "colorjs.io": "^0.6.1",
-    commander: "^14.0.3",
-    "fast-glob": "^3.3.3",
-    hsluv: "^1.0.1",
-    "object-hash": "^3.0.0",
-    picocolors: "^1.1.1",
-    postcss: "^8.5.8",
-    ramda: "^0.32.0",
-    "style-dictionary": "^5.4.0",
-    zod: "^4.3.6",
-    "zod-validation-error": "^5.0.0"
-  },
-  devDependencies: {
-    "@tokens-studio/types": "0.5.2",
-    "@types/chroma-js": "3.1.2",
-    "@types/node": "24.12.2",
-    "@types/object-hash": "3.0.6",
-    "@types/ramda": "0.31.1",
-    tsup: "8.5.1",
-    tsx: "4.21.0",
-    typescript: "5.9.3"
-  }
-};
-
-// src/tokens/utils.ts
 import * as R from "ramda";
-var mapToLowerCase = R.map(R.toLower);
-var hasAnyTruth = R.any(R.equals(true));
-var getType = (token) => (token.$type ?? token.type) || "";
-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);
-  }
-);
-var sizeMap = {
-  xsmall: "xs",
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  xlarge: "xl"
-};
-var sizeComparator = (size) => {
-  const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size || val === size);
-  return sortIndex ?? 0;
+//#region src/tokens/process/output/theme.ts
+const defaultFileHeader = `build: v${version}`;
+const getFileNameWithoutExtension = (path) => {
+	const pathSegments = path.split("/");
+	return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
 };
-
-// src/tokens/process/output/theme.ts
-var defaultFileHeader = `build: v${package_default.version}`;
-var getFileNameWithoutExtension = (path) => {
-  const pathSegments = path.split("/");
-  return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
-};
-var createThemeCSSFiles = ({
-  processedBuilds,
-  fileHeader = defaultFileHeader
-}) => {
-  const groupedByTheme = {};
-  for (const [_, buildResults] of Object.entries(processedBuilds)) {
-    for (const buildResult of buildResults) {
-      const themeName = buildResult.permutation.theme;
-      const newOutputs = buildResult.formatted;
-      if (R2.isNotEmpty(newOutputs)) {
-        const currentOutputs = groupedByTheme[themeName] ?? [];
-        groupedByTheme[themeName] = R2.concat(currentOutputs, newOutputs);
-      }
-    }
-  }
-  const sortOrder = [
-    "size-mode/",
-    "type-scale",
-    "color-scheme/light",
-    "typography/secondary",
-    "size",
-    "semantic",
-    "color-scheme/dark",
-    "color-scheme/contrast",
-    "typography/primary",
-    "color/"
-  ];
-  const sortByDefinedOrder = R2.sortBy((file) => {
-    const filePath = file.destination || "";
-    const sortIndex = sortOrder.findIndex((sortElement) => {
-      if (sortElement.endsWith("/")) {
-        return filePath.includes(sortElement);
-      }
-      return filePath.includes(`${sortElement}.css`);
-    });
-    if (sortIndex === -1) {
-      console.error(
-        pc.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
-      );
-      console.log(
-        pc.dim(
-          `
+/**
+* Generates theme-specific CSS files from Style Dictionary build results.
+*
+* @param processedBuilds - The processed build results containing formatted CSS outputs
+*                          grouped by themes and other permutations.
+* @param fileHeader - Optional header to be included in the generated CSS files.
+* @returns An array of `OutputFile` objects, each representing a theme-specific CSS file
+*          with its destination and content.
+*
+* @remarks
+* - The function groups the build results by theme and ensures a deterministic order
+*   for the sections of the entry CSS file using a predefined sort order.
+* - If a CSS section does not have a defined sort order the section is added to the end of the entry file.
+* - The generated CSS files include a header with metadata and layer definitions.
+*/
+const createThemeCSSFiles = ({ processedBuilds, fileHeader = defaultFileHeader }) => {
+	const groupedByTheme = {};
+	for (const [_, buildResults] of Object.entries(processedBuilds)) for (const buildResult of buildResults) {
+		const themeName = buildResult.permutation.theme;
+		const newOutputs = buildResult.formatted;
+		if (R.isNotEmpty(newOutputs)) {
+			const currentOutputs = groupedByTheme[themeName] ?? [];
+			groupedByTheme[themeName] = R.concat(currentOutputs, newOutputs);
+		}
+	}
+	/**
+	* Defines a sort order for the sections of the entry CSS file.
+	* This ensures a deterministic order, whereas earlier this was nondeterministic
+	*/
+	const sortOrder = [
+		"size-mode/",
+		"type-scale",
+		"color-scheme/light",
+		"typography/secondary",
+		"size",
+		"semantic",
+		"color-scheme/dark",
+		"color-scheme/contrast",
+		"typography/primary",
+		"color/"
+	];
+	const sortByDefinedOrder = R.sortBy((file) => {
+		const filePath = file.destination || "";
+		const sortIndex = sortOrder.findIndex((sortElement) => {
+			if (sortElement.endsWith("/")) return filePath.includes(sortElement);
+			return filePath.includes(`${sortElement}.css`);
+		});
+		if (sortIndex === -1) {
+			console.error(pc.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`));
+			console.log(pc.dim(`
 The section will currently be added to the end of the entry file, but the exact
-order may change due to nondeterminism.`.trim()
-        )
-      );
-      return Infinity;
-    }
-    return sortIndex;
-  });
-  const header = `@charset "UTF-8";
+order may change due to nondeterminism.`.trim()));
+			return Infinity;
+		}
+		return sortIndex;
+	});
+	const header = `@charset "UTF-8";
 /*
 ${fileHeader}
 */
 
 `;
-  const sortAlphabetically = R2.sort(R2.ascend((x) => x.destination || ""));
-  const sortBySize = R2.sortBy(
-    R2.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
-  );
-  const pickOutputs = R2.map(R2.view(R2.lensProp("output")));
-  const themeCSSFile = R2.pipe(
-    sortAlphabetically,
-    sortBySize,
-    sortByDefinedOrder,
-    pickOutputs,
-    R2.join("\n"),
-    (content) => header + content
-  );
-  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
-    destination: `${theme}.css`,
-    output: themeCSSFile(files)
-  }));
-  return themeCSSFiles;
-};
-export {
-  createThemeCSSFiles,
-  defaultFileHeader
+	const sortAlphabetically = R.sort(R.ascend((x) => x.destination || ""));
+	const sortBySize = R.sortBy(R.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator));
+	const pickOutputs = R.map(R.view(R.lensProp("output")));
+	const themeCSSFile = R.pipe(sortAlphabetically, sortBySize, sortByDefinedOrder, pickOutputs, R.join("\n"), (content) => header + content);
+	return Object.entries(groupedByTheme).map(([theme, files]) => ({
+		destination: `${theme}.css`,
+		output: themeCSSFile(files)
+	}));
 };
+//#endregion
+export { createThemeCSSFiles, defaultFileHeader };