@digdir/designsystemet 1.1.3 → 1.1.4

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

@@ -3,7 +3,7 @@ import chalk3 from "chalk";
 
 // src/tokens/process/platform.ts
 import chalk2 from "chalk";
-import * as R12 from "ramda";
+import * as R10 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/types.ts
@@ -14,7 +14,7 @@ var colorCategories = {
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R11 from "ramda";
+import * as R9 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/utils.ts
@@ -113,7 +113,11 @@ var colorScheme = {
         (t) => !isColorCategoryToken(t)
       ])
     );
-    const formattedTokens = filteredAllTokens.map(format).join("\n");
+    const formattedMap = filteredAllTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 ${colorSchemeProperty}}
@@ -131,7 +135,8 @@ var colorCategory = {
   name: "ds/css-colorcategory",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = R2.compose(
       createPropertyFormatter({
         outputReferences,
@@ -148,7 +153,12 @@ var colorCategory = {
         }
       })
     );
-    const formattedTokens = dictionary.allTokens.map(format).join("\n");
+    const formattedMap = dictionary.allTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
     const content = `{
 ${formattedTokens}
 }
@@ -179,30 +189,30 @@ var overrideSizingFormula = (format, token) => {
     calc
   };
 };
-var formatSizingTokens = (format, tokens) => {
-  const { round, calc } = R3.reduce(
-    (acc, token) => {
-      const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
-      return {
-        round: [...acc.round, `${name}: ${round2};`],
-        calc: [...acc.calc, `${name}: ${calc2};`]
-      };
-    },
-    { round: [], calc: [] },
-    tokens
-  );
-  return `
+var formatSizingTokens = (format, tokens) => R3.reduce(
+  (acc, token) => {
+    const { round, calc, name } = overrideSizingFormula(format, token);
+    return {
+      tokens: [...acc.tokens, token],
+      round: [...acc.round, `${name}: ${round};`],
+      calc: [...acc.calc, `${name}: ${calc};`]
+    };
+  },
+  { tokens: [], round: [], calc: [] },
+  tokens
+);
+var sizingTemplate = ({ round, calc }) => `
 ${calc.join("\n")}
 
   @supports (width: round(down, .1em, 1px)) {
 ${round.join("\n")}
   }`;
-};
 var semantic = {
   name: "ds/css-semantic",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = createPropertyFormatter2({
       outputReferences,
       dictionary,
@@ -215,7 +225,18 @@ var semantic = {
       (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
       filteredTokens
     );
-    const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
+    const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
+    const formattedMap = restTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
+      token: formattedSizingTokens.tokens[i],
+      formatted: t
+    }));
+    buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
+    const sizingSnippet = sizingTemplate(formattedSizingTokens);
+    const formattedTokens = formattedMap.map(R3.view(R3.lensProp("formatted"))).concat(sizingSnippet);
     const content = `{
 ${formattedTokens.join("\n")}
 }
@@ -240,7 +261,8 @@ var typography = {
   name: "ds/css-typography",
   format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
     const format = createPropertyFormatter3({
       outputReferences,
       dictionary,
@@ -248,7 +270,12 @@ var typography = {
       usesDtcg
     });
     const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
+    const formattedMap = filteredTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
     const content = selector ? `${selector} {
 ${formattedTokens}
 }` : formattedTokens;
@@ -455,90 +482,6 @@ var semanticVariables = ({ theme }) => {
   };
 };
 
-// src/tokens/process/configs/storefront.ts
-import * as R9 from "ramda";
-import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
-
-// src/tokens/process/formats/js-tokens.ts
-import * as R8 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R8.groupBy((token) => getType(token));
-var removeUnwatedTokens = R8.pipe(
-  R8.reject((token) => isColorCategoryToken(token)),
-  R8.reject((token) => R8.any((path) => path.startsWith("_"))(token.path))
-);
-var dissocExtensions = R8.pipe(R8.dissoc("$extensions"), R8.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R8.map((token) => dissocExtensions(token));
-var toCssVarName = R8.pipe(R8.split(":"), R8.head, R8.trim);
-var jsTokens = {
-  name: "ds/js-tokens",
-  format: async ({ dictionary, file, options }) => {
-    const { usesDtcg, outputReferences } = options;
-    const format = createPropertyFormatter4({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const formatTokens = R8.map((token) => {
-      if (pathStartsWithOneOf(["size", "_size"], token)) {
-        const { calc, name } = overrideSizingFormula(format, token);
-        return {
-          ...token,
-          name: name.trim(),
-          $value: calc.trim()
-        };
-      }
-      return {
-        ...token,
-        name: toCssVarName(format(token))
-      };
-    });
-    const processTokens = R8.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
-    const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
-    const content = Object.entries(tokens).map(
-      ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
-`
-    ).join("\n");
-    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
-  }
-};
-
-// src/tokens/process/configs/storefront.ts
-var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
-  return {
-    preprocessors: ["tokens-studio"],
-    platforms: {
-      ts: {
-        prefix,
-        basePxFontSize,
-        transforms: dsTransformers,
-        buildPath: `${theme}/`,
-        files: [
-          {
-            destination: `${colorScheme2}.ts`,
-            format: jsTokens.name,
-            filter: (token) => {
-              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R9.includes("semantic", token.filePath))
-                return false;
-              const isSemanticColor = R9.includes("semantic", token.filePath) && typeEquals(["color"], token);
-              const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
-              return isSemanticColor || wantedTypes;
-            }
-          }
-        ],
-        options: {
-          outputReferences: (token, options) => {
-            const include = pathStartsWithOneOf(["border-radius"], token);
-            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
-            return (include || isWantedSize) && outputReferencesFilter2(token, options);
-          }
-        }
-      }
-    }
-  };
-};
-
 // src/tokens/process/configs/typography.ts
 import { expandTypesMap } from "@tokens-studio/sd-transforms";
 var typographyVariables = ({ theme, typography: typography2 }) => {
@@ -565,6 +508,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
           sizeRem.name,
           "ts/size/lineheight",
           "ts/typography/fontWeight",
+          "ts/size/css/letterspacing",
           typographyName.name
         ],
         files: [
@@ -752,9 +696,9 @@ var TypographyValues;
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import chalk from "chalk";
 import { kebabCase } from "change-case";
-import * as R10 from "ramda";
+import * as R8 from "ramda";
 var processed = Symbol("Type brand for ProcessedThemeObject");
-var hasUnknownProps = R10.pipe(R10.values, R10.none(R10.equals("unknown")), R10.not);
+var hasUnknownProps = R8.pipe(R8.values, R8.none(R8.equals("unknown")), R8.not);
 var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
   if (!x.group) {
     return false;
@@ -768,7 +712,6 @@ StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(typographyName);
 StyleDictionary.registerTransform(resolveMath);
 StyleDictionary.registerTransform(unitless);
-StyleDictionary.registerFormat(jsTokens);
 for (const format of Object.values(formats)) {
   StyleDictionary.registerFormat(format);
 }
@@ -782,12 +725,15 @@ var configs = {
   warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
   infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
   typographyVariables,
-  semanticVariables,
-  typescriptTokens
+  semanticVariables
 };
 
 // src/tokens/process/platform.ts
-var buildOptions;
+var buildOptions = {
+  verbose: false,
+  processed$themes: [],
+  buildTokenFormats: {}
+};
 var sd = new StyleDictionary2();
 var buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
@@ -820,13 +766,6 @@ var buildConfigs = {
     log: ({ permutation: { theme } }) => `${theme} - info`
   },
   semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
-  // storefront: {
-  //   name: 'Storefront preview tokens',
-  //   getConfig: configs.typescriptTokens,
-  //   dimensions: ['color-scheme'],
-  //   options: { outPath: path.resolve('../../apps/storefront/tokens') },
-  //   enabled: () => buildOptions?.preview ?? false,
-  // },
 };
 
 // src/tokens/process/output/declarations.ts
@@ -849,7 +788,7 @@ import type {} from '@digdir/designsystemet-react/colors';
 
 declare module '@digdir/designsystemet-react/colors' {
   export interface MainAndSupportColors {
-${colors.map((color) => `    ${color}: never;`).join("\n")}
+${colors.map((color) => `    ${color.includes("-") ? `'${color}'` : color}: never;`).join("\n")}
   }
 }
 `.trimStart();

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

@@ -5,11 +5,11 @@ import * as R from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.1.3",
+  version: "1.1.4",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
-    node: ">=22.16.0"
+    node: ">=22.17.0"
   },
   repository: {
     type: "git",
@@ -58,6 +58,7 @@ var package_default = {
     "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
     "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
     "update:template": "tsx ./src/scripts/update-template.ts",
+    "update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
     "update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
     verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
   },
@@ -75,8 +76,8 @@ var package_default = {
     "object-hash": "^3.0.0",
     postcss: "^8.5.6",
     ramda: "^0.31.3",
-    "style-dictionary": "^5.0.0",
-    zod: "^3.25.67",
+    "style-dictionary": "^5.0.1",
+    zod: "^3.25.74",
     "zod-validation-error": "^3.5.2"
   },
   devDependencies: {
@@ -84,8 +85,7 @@ var package_default = {
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/glob": "^8.1.0",
-    "@types/node": "^22.15.32",
+    "@types/node": "^22.16.0",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.30.2",
     "fs-extra": "^11.3.0",

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

@@ -1,3 +1,4 @@
+import type { TransformedToken } from 'style-dictionary/types';
 import type { OutputFile, TokenSet } from '../types.js';
 import { type ThemePermutation } from '../types.js';
 import { type ProcessedThemeObject } from './utils/getMultidimensionalThemes.js';
@@ -8,12 +9,15 @@ type SharedOptions = {
     defaultColor?: string;
     /** Dry run, no files will be written */
     dry?: boolean;
-    /** Generate preview tokens */
-    preview: boolean;
     /** Token Studio `$themes.json` content */
     processed$themes: ProcessedThemeObject[];
     /** Color groups */
     colorGroups?: string[];
+    /** Build token format map */
+    buildTokenFormats: Record<string, {
+        token: TransformedToken;
+        formatted: string;
+    }[]>;
 };
 export type BuildOptions = {
     type: 'build';
@@ -29,14 +33,15 @@ export type FormatOptions = {
     /** Tokensets */
     tokenSets: Map<string, TokenSet>;
 } & SharedOptions;
-type ProcessOptions = BuildOptions | FormatOptions;
+export type ProcessOptions = BuildOptions | FormatOptions;
 type ProcessedBuildConfigs<T> = Record<keyof typeof buildConfigs, T>;
 export type ProcessReturn = ProcessedBuildConfigs<BuildResult[]>;
 type BuildResult = {
     permutation: ThemePermutation;
     formatted: OutputFile[];
+    tokens: TransformedToken[];
 };
-export declare let buildOptions: ProcessOptions | undefined;
+export declare let buildOptions: SharedOptions;
 declare const buildConfigs: {
     typography: {
         getConfig: import("./configs/shared.js").GetStyleDictionaryConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/platform.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAqC,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAElG,KAAK,aAAa,GAAG;IACnB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,aAAa,CAAC;AAElB,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB;IAChB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAClC,GAAG,aAAa,CAAC;AAElB,KAAK,cAAc,GAAG,YAAY,GAAG,aAAa,CAAC;AAEnD,KAAK,qBAAqB,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjE,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,UAAU,EAAE,CAAC;CACzB,CAAC;AAeF,eAAO,IAAI,YAAY,EAAE,cAAc,GAAG,SAAS,CAAC;AAOpD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCqB,CAAC;AAExC,wBAAsB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,CAqIrF"}
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/platform.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAqC,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAElG,KAAK,aAAa,GAAG;IACnB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,0CAA0C;IAC1C,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,6BAA6B;IAC7B,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,gBAAgB,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC,CAAC;CACrF,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,aAAa,CAAC;AAElB,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,QAAQ,CAAC;IACf,gBAAgB;IAChB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAClC,GAAG,aAAa,CAAC;AAElB,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,aAAa,CAAC;AAE1D,KAAK,qBAAqB,CAAC,CAAC,IAAI,MAAM,CAAC,MAAM,OAAO,YAAY,EAAE,CAAC,CAAC,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,qBAAqB,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjE,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,gBAAgB,CAAC;IAC9B,SAAS,EAAE,UAAU,EAAE,CAAC;IACxB,MAAM,EAAE,gBAAgB,EAAE,CAAC;CAC5B,CAAC;AAgBF,eAAO,IAAI,YAAY,EAAE,aAIxB,CAAC;AAOF,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BqB,CAAC;AAExC,wBAAsB,eAAe,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,CAuIrF"}