@digdir/designsystemet 1.0.4 → 1.0.5

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

@@ -984,7 +984,7 @@ var buildConfigs = {
   // },
 };
 async function processPlatform(options) {
-  const { dry, process, $themes } = options;
+  const { process, $themes } = options;
   const platform = "css";
   const tokenSets = process === "format" ? options.tokenSets : void 0;
   const tokensDir = process === "build" ? options.tokensDir : void 0;

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/types.d.ts

@@ -58,4 +58,8 @@ export type OutputFile = {
     output: string;
     destination: string | undefined;
 };
+export type DesignsystemetObject = {
+    name: string;
+    version: string;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACjF,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CACjC,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9C,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE1B,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,MAAM,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE9F,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACjF,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CACjC,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9C,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAE1B,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,MAAM,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE9F,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "engines": {
@@ -40,11 +40,12 @@
     "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-create --theme options-test --clean",
-    "test:tokens-create-config": "yarn designsystemet tokens create --config ./test-tokens-create-complex.config.json",
-    "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens-create -o ./test-tokens-build --clean",
+    "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",
+    "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",