@digdir/designsystemet 1.1.3 → 1.1.4

package/dist/src/tokens/process/configs/color.js

@@ -1,5 +1,5 @@
 // src/tokens/process/configs/color.ts
-import * as R12 from "ramda";
+import * as R10 from "ramda";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
@@ -67,213 +67,27 @@ function inlineTokens(shouldInline, tokens) {
 }
 
 // src/tokens/process/formats/css/color.ts
-import * as R2 from "ramda";
+import * as R7 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
-var prefersColorScheme = (colorScheme2, content) => `
-@media (prefers-color-scheme: ${colorScheme2}) {
-  [data-color-scheme="auto"] ${content}
-}
-`;
-var colorScheme = {
-  name: "ds/css-colorscheme",
-  format: async ({ dictionary, options, platform }) => {
-    const { allTokens } = dictionary;
-    const { outputReferences, usesDtcg } = options;
-    const { selector, colorScheme: colorScheme2, layer } = platform;
-    const colorScheme_ = colorScheme2;
-    const format = createPropertyFormatter({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
-  color-scheme: ${colorScheme_};
-` : "";
-    const filteredAllTokens = allTokens.filter(
-      R2.allPass([
-        R2.anyPass([
-          // Include semantic tokens in the output
-          isSemanticToken,
-          // Include global color tokens
-          isGlobalColorToken
-        ]),
-        // Don't include color category tokens -- they are exported separately
-        (t) => !isColorCategoryToken(t)
-      ])
-    );
-    const formattedTokens = filteredAllTokens.map(format).join("\n");
-    const content = `{
-${formattedTokens}
-${colorSchemeProperty}}
-`;
-    const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
-    const body = R2.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content} ${autoSelectorContent}
-}
-` : `${selector} ${content} ${autoSelectorContent}
-`;
-    return body;
-  }
-};
-var colorCategory = {
-  name: "ds/css-colorcategory",
-  format: async ({ dictionary, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const format = R2.compose(
-      createPropertyFormatter({
-        outputReferences,
-        dictionary,
-        format: "css",
-        usesDtcg
-      }),
-      (token) => ({
-        ...token,
-        name: token.name.replace(/color-\w+-/, "color-"),
-        original: {
-          ...token.original,
-          $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
-        }
-      })
-    );
-    const formattedTokens = dictionary.allTokens.map(format).join("\n");
-    const content = `{
-${formattedTokens}
-}
-`;
-    const body = R2.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content}
-}
-` : `${selector} ${content}
-`;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css/semantic.ts
-import * as R3 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
-var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
-var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
-var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
-var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
-var overrideSizingFormula = (format, token) => {
-  const [name, value] = format(token).split(":");
-  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
-  const round = `round(down, ${calc}, 1px)`;
-  return {
-    name,
-    round,
-    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 `
-${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 format = createPropertyFormatter2({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
-    const filteredTokens = R3.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
-    const [sizingTokens, restTokens] = R3.partition(
-      (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
-      filteredTokens
-    );
-    const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
-    const content = `{
-${formattedTokens.join("\n")}
-}
-`;
-    const body = R3.isNotNil(layer) ? `@layer ${layer} {
-${selector} ${content}
-}
-` : `${selector} ${content}
-`;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css/typography.ts
-import * as R4 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
-var typographyFontFamilyPredicate = R4.allPass([
-  R4.pathSatisfies(R4.includes("typography"), ["path"]),
-  R4.pathSatisfies(R4.includes("fontFamily"), ["path"])
-]);
-var typography = {
-  name: "ds/css-typography",
-  format: async ({ dictionary, options, platform }) => {
-    const { outputReferences, usesDtcg } = options;
-    const { selector, layer } = platform;
-    const format = createPropertyFormatter3({
-      outputReferences,
-      dictionary,
-      format: "css",
-      usesDtcg
-    });
-    const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
-    const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
-    const content = selector ? `${selector} {
-${formattedTokens}
-}` : formattedTokens;
-    const body = R4.isNotNil(layer) ? `@layer ${layer} {
-${content}
-}` : content;
-    return body;
-  }
-};
-
-// src/tokens/process/formats/css.ts
-var formats = {
-  colorScheme,
-  colorCategory,
-  semantic,
-  typography
-};
 
 // src/tokens/process/platform.ts
 import chalk2 from "chalk";
-import * as R11 from "ramda";
+import * as R6 from "ramda";
 import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/process/configs.ts
 import { register } from "@tokens-studio/sd-transforms";
-import * as R10 from "ramda";
+import * as R5 from "ramda";
 import StyleDictionary from "style-dictionary";
 
 // src/tokens/process/configs/semantic.ts
-import * as R6 from "ramda";
+import * as R3 from "ramda";
 import { outputReferencesFilter } from "style-dictionary/utils";
 
 // src/tokens/process/transformers.ts
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
-import * as R5 from "ramda";
-var isPx = R5.test(/\b\d+px\b/g);
+import * as R2 from "ramda";
+var isPx = R2.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -364,8 +178,8 @@ var semanticVariables = ({ theme }) => {
             destination: `semantic.css`,
             format: formats.semantic.name,
             filter: (token) => {
-              const isUwantedToken = R6.anyPass([R6.includes("primitives/global")])(token.filePath);
-              const isPrivateToken = R6.includes("_", token.path);
+              const isUwantedToken = R3.anyPass([R3.includes("primitives/global")])(token.filePath);
+              const isPrivateToken = R3.includes("_", token.path);
               const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
               const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
               const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
@@ -385,90 +199,6 @@ var semanticVariables = ({ theme }) => {
   };
 };
 
-// src/tokens/process/configs/storefront.ts
-import * as R8 from "ramda";
-import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
-
-// src/tokens/process/formats/js-tokens.ts
-import * as R7 from "ramda";
-import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
-var groupByType = R7.groupBy((token) => getType(token));
-var removeUnwatedTokens = R7.pipe(
-  R7.reject((token) => isColorCategoryToken(token)),
-  R7.reject((token) => R7.any((path) => path.startsWith("_"))(token.path))
-);
-var dissocExtensions = R7.pipe(R7.dissoc("$extensions"), R7.dissocPath(["original", "$extensions"]));
-var removeUnwatedProps = R7.map((token) => dissocExtensions(token));
-var toCssVarName = R7.pipe(R7.split(":"), R7.head, R7.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 = R7.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 = R7.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) && !R8.includes("semantic", token.filePath))
-                return false;
-              const isSemanticColor = R8.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 }) => {
@@ -495,6 +225,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
           sizeRem.name,
           "ts/size/lineheight",
           "ts/typography/fontWeight",
+          "ts/size/css/letterspacing",
           typographyName.name
         ],
         files: [
@@ -682,9 +413,9 @@ var TypographyValues;
 // src/tokens/process/utils/getMultidimensionalThemes.ts
 import chalk from "chalk";
 import { kebabCase } from "change-case";
-import * as R9 from "ramda";
+import * as R4 from "ramda";
 var processed = Symbol("Type brand for ProcessedThemeObject");
-var hasUnknownProps = R9.pipe(R9.values, R9.none(R9.equals("unknown")), R9.not);
+var hasUnknownProps = R4.pipe(R4.values, R4.none(R4.equals("unknown")), R4.not);
 
 // src/tokens/process/configs.ts
 void register(StyleDictionary, { withSDBuiltins: false });
@@ -692,7 +423,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);
 }
@@ -706,12 +436,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"] },
@@ -744,13 +477,221 @@ 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/formats/css/color.ts
+var prefersColorScheme = (colorScheme2, content) => `
+@media (prefers-color-scheme: ${colorScheme2}) {
+  [data-color-scheme="auto"] ${content}
+}
+`;
+var colorScheme = {
+  name: "ds/css-colorscheme",
+  format: async ({ dictionary, options, platform }) => {
+    const { allTokens } = dictionary;
+    const { outputReferences, usesDtcg } = options;
+    const { selector, colorScheme: colorScheme2, layer } = platform;
+    const colorScheme_ = colorScheme2;
+    const format = createPropertyFormatter({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
+  color-scheme: ${colorScheme_};
+` : "";
+    const filteredAllTokens = allTokens.filter(
+      R7.allPass([
+        R7.anyPass([
+          // Include semantic tokens in the output
+          isSemanticToken,
+          // Include global color tokens
+          isGlobalColorToken
+        ]),
+        // Don't include color category tokens -- they are exported separately
+        (t) => !isColorCategoryToken(t)
+      ])
+    );
+    const formattedMap = filteredAllTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    const formattedTokens = formattedMap.map(R7.view(R7.lensProp("formatted"))).join("\n");
+    const content = `{
+${formattedTokens}
+${colorSchemeProperty}}
+`;
+    const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
+    const body = R7.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content} ${autoSelectorContent}
+}
+` : `${selector} ${content} ${autoSelectorContent}
+`;
+    return body;
+  }
+};
+var colorCategory = {
+  name: "ds/css-colorcategory",
+  format: async ({ dictionary, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = R7.compose(
+      createPropertyFormatter({
+        outputReferences,
+        dictionary,
+        format: "css",
+        usesDtcg
+      }),
+      (token) => ({
+        ...token,
+        name: token.name.replace(/color-\w+-/, "color-"),
+        original: {
+          ...token.original,
+          $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
+        }
+      })
+    );
+    const formattedMap = dictionary.allTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R7.view(R7.lensProp("formatted"))).join("\n");
+    const content = `{
+${formattedTokens}
+}
+`;
+    const body = R7.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content}
+}
+` : `${selector} ${content}
+`;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css/semantic.ts
+import * as R8 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
+var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
+var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
+var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
+var isInlineTokens = R8.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
+var overrideSizingFormula = (format, token) => {
+  const [name, value] = format(token).split(":");
+  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
+  const round = `round(down, ${calc}, 1px)`;
+  return {
+    name,
+    round,
+    calc
+  };
+};
+var formatSizingTokens = (format, tokens) => R8.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, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = createPropertyFormatter2({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
+    const filteredTokens = R8.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const [sizingTokens, restTokens] = R8.partition(
+      (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
+      filteredTokens
+    );
+    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(R8.view(R8.lensProp("formatted"))).concat(sizingSnippet);
+    const content = `{
+${formattedTokens.join("\n")}
+}
+`;
+    const body = R8.isNotNil(layer) ? `@layer ${layer} {
+${selector} ${content}
+}
+` : `${selector} ${content}
+`;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css/typography.ts
+import * as R9 from "ramda";
+import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
+var typographyFontFamilyPredicate = R9.allPass([
+  R9.pathSatisfies(R9.includes("typography"), ["path"]),
+  R9.pathSatisfies(R9.includes("fontFamily"), ["path"])
+]);
+var typography = {
+  name: "ds/css-typography",
+  format: async ({ dictionary, options, platform }) => {
+    const { outputReferences, usesDtcg } = options;
+    const { selector, layer, files } = platform;
+    const destination = files?.[0]?.destination;
+    const format = createPropertyFormatter3({
+      outputReferences,
+      dictionary,
+      format: "css",
+      usesDtcg
+    });
+    const filteredTokens = R9.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedMap = filteredTokens.map((token) => ({
+      token,
+      formatted: format(token)
+    }));
+    buildOptions.buildTokenFormats[destination] = formattedMap;
+    const formattedTokens = formattedMap.map(R9.view(R9.lensProp("formatted"))).join("\n");
+    const content = selector ? `${selector} {
+${formattedTokens}
+}` : formattedTokens;
+    const body = R9.isNotNil(layer) ? `@layer ${layer} {
+${content}
+}` : content;
+    return body;
+  }
+};
+
+// src/tokens/process/formats/css.ts
+var formats = {
+  colorScheme,
+  colorCategory,
+  semantic,
+  typography
 };
 
 // src/tokens/process/configs/color.ts
@@ -774,7 +715,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
           {
             destination: `color-scheme/${colorScheme2}.css`,
             format: formats.colorScheme.name,
-            filter: (token) => typeEquals("color", token) && !R12.startsWith(["global"], token.path)
+            filter: (token) => typeEquals("color", token) && !R10.startsWith(["global"], token.path)
           }
         ],
         options: {