@digdir/designsystemet 1.0.3 → 1.0.5

package/dist/src/tokens/process/theme.d.ts

@@ -0,0 +1,27 @@
+import type { OutputFile } from '../types.js';
+import type { ProcessReturn } from './platform.js';
+export declare const defaultFileHeader: string;
+type CreateThemeCSSFiles = {
+    /** The processed build results containing formatted CSS outputs grouped by themes and other permutations. */
+    processedBuilds: ProcessReturn;
+    /** Optional header to be included in the generated CSS files. */
+    fileHeader?: string;
+};
+/**
+ * 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.
+ */
+export declare const createThemeCSSFiles: ({ processedBuilds, fileHeader, }: CreateThemeCSSFiles) => OutputFile[];
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/src/tokens/process/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/theme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAE1D,KAAK,mBAAmB,GAAG;IACzB,6GAA6G;IAC7G,eAAe,EAAE,aAAa,CAAC;IAC/B,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,kCAGjC,mBAAmB,KAAG,UAAU,EAiFlC,CAAC"}

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

@@ -0,0 +1,172 @@
+// src/tokens/process/theme.ts
+import * as R from "ramda";
+import chalk from "chalk";
+
+// package.json
+var package_default = {
+  name: "@digdir/designsystemet",
+  version: "1.0.5",
+  description: "CLI for Designsystemet",
+  author: "Designsystemet team",
+  engines: {
+    node: ">=22.14.0"
+  },
+  repository: {
+    type: "git",
+    url: "git+https://github.com/digdir/designsystemet.git"
+  },
+  homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
+  license: "MIT",
+  type: "module",
+  main: "./dist/src/index.js",
+  files: [
+    "./dist/**"
+  ],
+  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"
+    }
+  },
+  publishConfig: {
+    access: "public"
+  },
+  scripts: {
+    designsystemet: "tsx ./bin/designsystemet.ts",
+    "build:tokens": "yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
+    "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
+    build: "tsup && yarn build:types && yarn build:json-schema",
+    "build:types": "tsc --emitDeclarationOnly --declaration",
+    "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
+    types: "tsc --noEmit",
+    "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682  -n #003333 -b 99 -o ./test-tokens/options --theme options --clean",
+    "test:tokens-create-config": "yarn designsystemet tokens create --config ./test/test-tokens.config.json",
+    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens/options -o ./test-tokens/options-build --clean",
+    "test:tokens-build-config": "yarn designsystemet tokens build -t ./test-tokens/config -o ./test-tokens/config-build --clean",
+    "test:tokens-create-and-build-options": "yarn test:tokens-create-options && yarn test:tokens-build",
+    "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build-config",
+    test: "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-config",
+    "internal:tokens-create": "yarn designsystemet tokens create --config ./internal.config.json",
+    "update:template": "tsx ./src/scripts/update-template.ts",
+    "update:design-tokens": "yarn internal:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
+    verify: "yarn test && yarn update:template && yarn update:design-tokens"
+  },
+  dependencies: {
+    "@commander-js/extra-typings": "^13.1.0",
+    "@tokens-studio/sd-transforms": "1.2.12",
+    "apca-w3": "^0.1.9",
+    chalk: "^5.4.1",
+    "change-case": "^5.4.4",
+    "chroma-js": "^3.1.2",
+    commander: "^13.1.0",
+    "fast-glob": "^3.3.3",
+    hsluv: "^1.0.1",
+    "object-hash": "^3.0.0",
+    postcss: "^8.5.3",
+    ramda: "^0.30.1",
+    "style-dictionary": "^4.3.3",
+    zod: "^3.24.2",
+    "zod-validation-error": "^3.4.0"
+  },
+  devDependencies: {
+    "@types/apca-w3": "^0.1.3",
+    "@types/chroma-js": "^3.1.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/glob": "^8.1.0",
+    "@types/jscodeshift": "^0.12.0",
+    "@types/node": "^22.14.0",
+    "@types/object-hash": "^3.0.6",
+    "@types/ramda": "^0.30.2",
+    "fs-extra": "^11.3.0",
+    "ts-toolbelt": "^9.6.0",
+    tslib: "^2.8.1",
+    tsup: "^8.4.0",
+    tsx: "^4.19.3",
+    typescript: "^5.8.2",
+    "zod-to-json-schema": "^3.24.5"
+  }
+};
+
+// src/tokens/process/theme.ts
+var defaultFileHeader = `build: v${package_default.version}`;
+var createThemeCSSFiles = ({
+  processedBuilds,
+  fileHeader = defaultFileHeader
+}) => {
+  const groupedByTheme = {};
+  for (const [_, buildResults] of Object.entries(R.dissoc("types", 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);
+      }
+    }
+  }
+  const sortOrder = [
+    "color-scheme/light",
+    "typography/secondary",
+    "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(
+        chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
+      );
+      console.log(
+        chalk.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";
+
+@layer ds.theme, ds.base, ds.utilities, ds.components;
+
+/*
+${fileHeader}
+*/
+
+`;
+  const sortAlphabetically = R.sort(R.ascend((x) => x.destination || ""));
+  const pickOutputs = R.map(R.view(R.lensProp("output")));
+  const themeCSSFile = R.pipe(
+    sortAlphabetically,
+    sortByDefinedOrder,
+    pickOutputs,
+    R.join("\n"),
+    (content) => header + content
+  );
+  const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
+    destination: `${theme}.css`,
+    output: themeCSSFile(files)
+  }));
+  return themeCSSFiles;
+};
+export {
+  createThemeCSSFiles,
+  defaultFileHeader
+};

package/dist/src/tokens/process/transformers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/transformers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAMxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAS5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,SAWzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,SAMtB,CAAC"}

package/dist/src/tokens/{build → process}/transformers.js

@@ -1,8 +1,31 @@
+// src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
+import * as R2 from "ramda";
+
+// src/tokens/utils.ts
 import * as R from "ramda";
-import { getValue, pathStartsWithOneOf, typeEquals } from "../utils.js";
-const isPx = R.test(/\b\d+px\b/g);
-const sizeRem = {
+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((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
+  return hasAnyTruth(matchPathsStartingWith);
+});
+
+// src/tokens/process/transformers.ts
+var isPx = R2.test(/\b\d+px\b/g);
+var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
   transitive: true,
@@ -24,7 +47,7 @@ const sizeRem = {
     return value;
   }
 };
-const typographyName = {
+var typographyName = {
   name: "name/typography",
   type: "name",
   transitive: true,
@@ -34,7 +57,7 @@ const typographyName = {
     return token.name.replace("-typography", "");
   }
 };
-const resolveMath = {
+var resolveMath = {
   name: "ds/resolveMath",
   type: "value",
   transitive: true,
@@ -45,7 +68,7 @@ const resolveMath = {
   },
   transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
 };
-const unitless = {
+var unitless = {
   name: "ds/unitless",
   type: "value",
   transitive: true,

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

@@ -1,17 +1,17 @@
 import type { ThemeObject } from '@tokens-studio/types';
-import type { ThemeDimension, ThemePermutation } from '../types.js';
+import type { ThemeDimension, ThemePermutation } from '../../types.js';
 /**
  * Find the theme permutations that are relevant for the given theme dimensions.
  *
  * Technically, for the given dimensions all permutations are included, while for other
  * dimensions the first permutation is used.
  *
- * @param themes Theme objects from $themes.json (Tokens Studio)
+ * @param processed$themes Theme objects from $themes.json (Tokens Studio)
  * @param dimensions Which theme dimensions to return permutations for.
  *    'theme' (e.g. altinn/digdir/uutilsynet) is always implicitly included.
  * @returns the relevant theme permutations
  */
-export declare const getMultidimensionalThemes: (themes: ProcessedThemeObject[], dimensions: ThemeDimension[]) => PermutatedTheme[];
+export declare const getMultidimensionalThemes: (processed$themes: ProcessedThemeObject[], dimensions: ThemeDimension[]) => PermutatedTheme[];
 export type PermutatedTheme = {
     name: string;
     selectedTokenSets: string[];

package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMultidimensionalThemes.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/utils/getMultidimensionalThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKxD,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,yBAAyB,GAAI,kBAAkB,oBAAoB,EAAE,EAAE,YAAY,cAAc,EAAE,sBAe/G,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,MAAsD,CAAC;AAC/E;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAMvE;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,oBAAoB,GAAG,oBAAoB,CAUlG;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,EAAE,CAAC,CAAC"}