@digdir/designsystemet 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/src/tokens/configs.js

@@ -2154,6 +2154,9 @@ import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
 import * as R7 from "ramda";
 
+// src/tokens/utils/permutateThemes.ts
+import * as R from "ramda";
+
 // ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
 var BoxShadowTypes;
 (function(BoxShadowTypes2) {
@@ -2319,40 +2322,49 @@ var TypographyValues;
 
 // src/tokens/utils/permutateThemes.ts
 function mapThemesToSetsObject(themes) {
-  return Object.fromEntries(themes.map((theme) => [theme.name, filterTokenSets(theme.selectedTokenSets)]));
+  return themes.map((theme) => ({ name: theme.name, selectedTokenSets: filterTokenSets(theme.selectedTokenSets) }));
 }
 function permutateThemes(themes, { separator: separator2 = "-" } = {}) {
-  if (themes.some((theme) => theme.group)) {
-    const groups = {};
-    themes.forEach((theme) => {
-      if (theme.group) {
-        groups[theme.group] = [...groups[theme.group] ?? [], theme];
-      } else {
-        throw new Error(
-          `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
-        );
-      }
-    });
-    if (Object.keys(groups).length <= 1) {
-      return mapThemesToSetsObject(themes);
-    }
-    const permutations = cartesian(Object.values(groups));
-    return Object.fromEntries(
-      permutations.map((perm) => {
-        const reduced = perm.reduce(
-          (acc, curr) => [
-            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-            `${acc[0]}${acc[0] ? separator2 : ""}${curr.name}`,
-            [...acc[1], ...filterTokenSets(curr.selectedTokenSets)]
-          ],
-          ["", []]
-        );
-        return [reduced[0], [...new Set(reduced[1])]];
-      })
-    );
-  } else {
+  if (!themes.some((theme) => theme.group)) {
+    return mapThemesToSetsObject(themes);
+  }
+  const groups = {};
+  themes.forEach((theme) => {
+    if (theme.group) {
+      groups[theme.group] = [...groups[theme.group] ?? [], theme];
+    } else {
+      throw new Error(
+        `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
+      );
+    }
+  });
+  if (Object.keys(groups).length <= 1) {
     return mapThemesToSetsObject(themes);
   }
+  const permutations = cartesian(Object.values(groups));
+  const permutatedThemes = permutations.map((perm) => {
+    const permutatedTheme = perm.reduce(
+      (acc, theme) => {
+        const { group, name, selectedTokenSets } = theme;
+        let updatedPermutatedTheme = acc;
+        if (group) {
+          const groupProp = R.lensProp(group.toLowerCase());
+          updatedPermutatedTheme = R.set(groupProp, name.toLowerCase(), updatedPermutatedTheme);
+        }
+        const updatedName = `${String(acc.name)}${acc ? separator2 : ""}${name}`;
+        const sets = [...updatedPermutatedTheme.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
+        return {
+          ...updatedPermutatedTheme,
+          name: updatedName,
+          selectedTokenSets: sets
+        };
+      },
+      { name: "", selectedTokenSets: [] }
+    );
+    const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
+    return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
+  });
+  return permutatedThemes;
 }
 function filterTokenSets(tokensets) {
   return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
@@ -2369,7 +2381,7 @@ function cartesian(a) {
 }
 
 // src/tokens/transformers.ts
-import * as R2 from "ramda";
+import * as R3 from "ramda";
 
 // src/tokens/utils/noCase.ts
 var lowerCase = (text = "") => text.toLowerCase();
@@ -2399,18 +2411,18 @@ function replace(input, re, value) {
 }
 
 // src/tokens/utils/utils.ts
-import * as R from "ramda";
+import * as R2 from "ramda";
 var getType = (token) => (token.$type ?? token.type) || "";
 var getValue = (token) => token.$value ?? token.value;
-var typeEquals = (types, token) => {
-  if (R.isNil(token)) {
+var typeEquals = R2.curry((types, token) => {
+  if (R2.isNil(token)) {
     return false;
   }
-  return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
-};
+  return R2.includes(R2.toLower(getType(token)), R2.map(R2.toLower, Array.isArray(types) ? types : [types]));
+});
 
 // src/tokens/transformers.ts
-var isPx = R2.test(/\b\d+px\b/g);
+var isPx = R3.test(/\b\d+px\b/g);
 var sizeRem = {
   name: "ds/size/toRem",
   type: "value",
@@ -2445,19 +2457,19 @@ var typographyShorthand = {
   transitive: true,
   filter: (token) => token.type === "typography",
   transform: (token) => {
-    const typography = getValue(token);
-    return `${typography.fontWeight} ${typography.fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
+    const typography2 = getValue(token);
+    return `${typography2.fontWeight} ${typography2.fontSize}/${typography2.lineHeight} '${typography2.fontFamily}'`;
   }
 };
 
 // src/tokens/formats/js-tokens.ts
-import * as R3 from "ramda";
+import * as R4 from "ramda";
 import { fileHeader, createPropertyFormatter } from "style-dictionary/utils";
-var groupByType = R3.groupBy((token) => getType(token));
-var removeUnwatedTokens = R3.filter(
+var groupByType = R4.groupBy((token) => getType(token));
+var removeUnwatedTokens = R4.filter(
   (token) => !["fds-base_spacing", "fds-base_sizing"].includes(token.name)
 );
-var toCssVarName = R3.pipe(R3.split(":"), R3.head, R3.trim);
+var toCssVarName = R4.pipe(R4.split(":"), R4.head, R4.trim);
 var jsTokens = {
   name: "ds/js-tokens",
   format: async function({ dictionary, file }) {
@@ -2465,11 +2477,11 @@ var jsTokens = {
       dictionary,
       format: "css"
     });
-    const formatTokens = R3.map((token) => ({
+    const formatTokens = R4.map((token) => ({
       ...token,
       name: toCssVarName(format(token))
     }));
-    const processTokens = R3.pipe(removeUnwatedTokens, formatTokens, groupByType);
+    const processTokens = R4.pipe(removeUnwatedTokens, formatTokens, groupByType);
     const tokens = processTokens(dictionary.allTokens);
     const content = Object.entries(tokens).map(
       ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
@@ -2479,21 +2491,20 @@ var jsTokens = {
   }
 };
 
-// src/tokens/formats/css-variables.ts
-import * as R4 from "ramda";
-import { fileHeader as fileHeader2, createPropertyFormatter as createPropertyFormatter2, usesReferences } from "style-dictionary/utils";
-var calculatedVariable = R4.pipe(R4.split(/:(.*?);/g), (split5) => `${split5[0]}: calc(${R4.trim(split5[1])});`);
+// src/tokens/formats/css.ts
+import * as R5 from "ramda";
+import { fileHeader as fileHeader2, createPropertyFormatter as createPropertyFormatter2, usesReferences, getReferences } from "style-dictionary/utils";
 var prefersColorScheme = (mode, content) => `
 @media (prefers-color-scheme: ${mode}) {
   [data-ds-color-mode="auto"] ${content}
 }
 `;
-var cssVariables = {
-  name: "ds/css-variables",
+var colormode = {
+  name: "ds/css-colormode",
   format: async function({ dictionary, file, options, platform }) {
     const { allTokens } = dictionary;
     const { outputReferences } = options;
-    const { selector, isCalculatedToken, mode } = platform;
+    const { selector, mode, layer } = platform;
     const mode_ = mode;
     const header = await fileHeader2({ file });
     const format = createPropertyFormatter2({
@@ -2501,7 +2512,31 @@ var cssVariables = {
       dictionary,
       format: "css"
     });
-    const formatTokens = R4.map((token) => {
+    const content = `{
+${allTokens.map(format).join("\n")}
+}
+`;
+    const autoSelectorContent = ["light", "dark"].includes(mode_) ? prefersColorScheme(mode_, content) : "";
+    return header + `@layer ${layer} {
+${selector} ${content} ${autoSelectorContent}
+}
+`;
+  }
+};
+var calculatedVariable = R5.pipe(R5.split(/:(.*?);/g), (split3) => `${split3[0]}: calc(${R5.trim(split3[1])});`);
+var semantic = {
+  name: "ds/css-semantic",
+  format: async function({ dictionary, file, options, platform }) {
+    const { allTokens } = dictionary;
+    const { outputReferences } = options;
+    const { selector, isCalculatedToken, layer } = platform;
+    const header = await fileHeader2({ file });
+    const format = createPropertyFormatter2({
+      outputReferences,
+      dictionary,
+      format: "css"
+    });
+    const formatTokens = R5.map((token) => {
       const originalValue = getValue(token.original);
       if (usesReferences(originalValue) && typeof outputReferences === "function" && outputReferences?.(token, { dictionary })) {
         if (isCalculatedToken?.(token, options)) {
@@ -2515,14 +2550,12 @@ var cssVariables = {
 ${formattedVariables.join("\n")}
 }
 `;
-    const autoSelectorContent = ["light", "dark"].includes(mode_) ? prefersColorScheme(mode_, content) : "";
-    return header + `${selector} ${content}` + autoSelectorContent;
+    return header + `@layer ${layer} {
+${selector} ${content}
+}
+`;
   }
 };
-
-// src/tokens/formats/css-classes.ts
-import * as R5 from "ramda";
-import { fileHeader as fileHeader3, createPropertyFormatter as createPropertyFormatter3, getReferences } from "style-dictionary/utils";
 var sortByType = R5.sortBy((token) => token?.type === "typography");
 var getVariableName = R5.pipe(
   R5.split(":"),
@@ -2536,21 +2569,23 @@ var bemify = R5.pipe(
     const filteredPath = path.filter((p) => p !== "typography");
     const withPrefix = R5.concat([prefix], R5.remove(0, 0, filteredPath));
     const [rest, last] = R5.splitAt(-1, withPrefix);
-    return `${rest.join("-")}--${R5.head(last)}`;
+    const className = `${rest.join("-")}--${R5.head(last)}`;
+    return className;
   },
   R5.trim,
   R5.toLower
 );
 var classSelector = R5.pipe(R5.prop("path"), bemify);
-var isTypography = R5.curry(typeEquals)("typography");
-var sortTypographyLast = R5.sortWith([R5.ascend((token) => isTypography(token) ? 1 : 0)]);
-var cssClassesTypography = {
-  name: "ds/css-classes-typography",
+var sortTypographyLast = R5.sortWith([
+  R5.ascend((token) => typeEquals("typography")(token) ? 1 : 0)
+]);
+var typography = {
+  name: "ds/css-typography",
   format: async function({ dictionary, file, options, platform }) {
     const { outputReferences } = options;
-    const { selector } = platform;
-    const header = await fileHeader3({ file });
-    const format = createPropertyFormatter3({
+    const { selector, layer } = platform;
+    const header = await fileHeader2({ file });
+    const format = createPropertyFormatter2({
       outputReferences,
       dictionary,
       format: "css"
@@ -2584,17 +2619,20 @@ var cssClassesTypography = {
           }
           if (typeEquals("typography", token)) {
             const references = getReferences(getValue(token.original), dictionary.tokens);
-            const fontweight = R5.find(R5.curry(typeEquals)(["fontweights"]))(references);
-            const lineheight = R5.find(R5.curry(typeEquals)(["lineheights"]))(references);
-            const fontsize = R5.find(R5.curry(typeEquals)(["fontsizes"]))(references);
+            const fontweight = R5.find(typeEquals(["fontweights"]))(references);
+            const lineheight = R5.find(typeEquals(["lineheights"]))(references);
+            const fontsize = R5.find(typeEquals(["fontsizes"]))(references);
+            const letterSpacing = R5.find(typeEquals(["letterSpacing"]))(references);
             const fontSizeVar = fontsize ? getVariableName(format(fontsize)) : null;
             const fontWeightVar = fontweight ? getVariableName(format(fontweight)) : null;
             const lineheightVar = lineheight ? getVariableName(format(lineheight)) : null;
+            const letterSpacingVar = letterSpacing ? getVariableName(format(letterSpacing)) : null;
             const className = `
   .${classSelector(token)} {
     ${fontSizeVar && `font-size: ${fontSizeVar};`}
     ${lineheightVar && `line-height: ${lineheightVar};`}
     ${fontWeightVar && `font-weight: ${fontWeightVar};`}
+    ${letterSpacingVar && `letter-spacing: ${letterSpacingVar};`}
   }`;
             return { ...acc, classes: [className, ...acc.classes] };
           }
@@ -2605,15 +2643,11 @@ var cssClassesTypography = {
     )(sortedTokens);
     const classes = formattedTokens.classes.join("\n");
     const variables = formattedTokens.variables.join("\n");
-    const variables_ = `:root {
-${variables}
-}
-`;
     const content = selector ? `${selector} {
+${variables}
 ${classes}
 }` : classes;
-    return header + `@layer ds.typography {
-${variables_}
+    return header + `@layer ${layer} {
 ${content}
 }
 `;
@@ -2625,6 +2659,7 @@ var import_fs_extra = __toESM(require_lib(), 1);
 import glob from "fast-glob";
 import chalk from "chalk";
 import * as R6 from "ramda";
+var sortLightmodeFirst = R6.sortWith([R6.descend(R6.includes("light")), R6.descend(R6.includes("secondary"))]);
 var makeEntryFile = {
   name: "make_entryfile",
   do: async function(dictionary, platform) {
@@ -2633,8 +2668,13 @@ var makeEntryFile = {
     if (log?.verbosity !== "silent") {
       console.log(chalk.green(`Creating entry file: ${writePath}`));
     }
+    const generateImportUrls = R6.pipe(
+      sortLightmodeFirst,
+      R6.map((file) => `@import url('./${theme}/${file.toString()}');`),
+      R6.join("\n")
+    );
     const files = await glob(`**/*`, { cwd: platform.buildPath });
-    const content = R6.reverse(R6.sortBy(R6.includes("light"), files)).map((file) => `@import url('./${theme}/${file}');`).join("\n");
+    const content = generateImportUrls(files);
     await import_fs_extra.default.writeFile(writePath, content);
   },
   undo: async function noOp() {
@@ -2646,13 +2686,14 @@ void tokenStudio.registerTransforms(StyleDictionary);
 var prefix = "ds";
 var basePxFontSize = 16;
 var separator = "_";
-var fileHeader4 = () => [`These files are generated from design tokens defind using Token Studio`];
+var fileHeader3 = () => [`These files are generated from design tokens defind using Token Studio`];
 StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(nameKebab);
 StyleDictionary.registerTransform(typographyShorthand);
 StyleDictionary.registerFormat(jsTokens);
-StyleDictionary.registerFormat(cssVariables);
-StyleDictionary.registerFormat(cssClassesTypography);
+StyleDictionary.registerFormat(colormode);
+StyleDictionary.registerFormat(semantic);
+StyleDictionary.registerFormat(typography);
 StyleDictionary.registerAction(makeEntryFile);
 var dsTransformers = [
   nameKebab.name,
@@ -2666,7 +2707,8 @@ var dsTransformers = [
   "ts/size/lineheight",
   "ts/shadow/css/shorthand"
 ];
-var processThemeName = R7.pipe(R7.replace(`${separator}semantic`, ""), R7.toLower, R7.split(separator));
+var paritionPrimitives = R7.partition(R7.test(/(?!.*global\.json).*primitives.*/));
+var hasUnknownProps = R7.pipe(R7.values, R7.none(R7.equals("unknown")), R7.not);
 var outputColorReferences = (token) => {
   if (R7.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R7.includes("semantic/color", token.filePath)) {
     return true;
@@ -2678,6 +2720,7 @@ var permutateThemes2 = ($themes) => permutateThemes($themes, {
 });
 var colorModeVariables = ({ mode = "light", outPath, theme }) => {
   const selector = `${mode === "light" ? ":root, " : ""}[data-ds-color-mode="${mode}"]`;
+  const layer = `ds.theme.color-mode.${mode}`;
   return {
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
@@ -2688,6 +2731,7 @@ var colorModeVariables = ({ mode = "light", outPath, theme }) => {
         mode,
         theme,
         selector,
+        layer,
         //
         prefix,
         buildPath: `${outPath}/${theme}/`,
@@ -2696,12 +2740,12 @@ var colorModeVariables = ({ mode = "light", outPath, theme }) => {
         files: [
           {
             destination: `color-mode/${mode}.css`,
-            format: cssVariables.name,
+            format: colormode.name,
             filter: (token) => !token.isSource && typeEquals("color", token)
           }
         ],
         options: {
-          fileHeader: fileHeader4,
+          fileHeader: fileHeader3,
           outputReferences: (token, options) => outputColorReferences(token) && outputReferencesFilter(token, options)
         }
       }
@@ -2710,6 +2754,7 @@ var colorModeVariables = ({ mode = "light", outPath, theme }) => {
 };
 var semanticVariables = ({ outPath, theme }) => {
   const selector = `:root`;
+  const layer = `ds.theme.semantic`;
   const isCalculatedToken = (token) => typeEquals(["spacing", "sizing", "borderRadius"], token);
   return {
     log: { verbosity: "silent" },
@@ -2722,6 +2767,7 @@ var semanticVariables = ({ outPath, theme }) => {
         basePxFontSize,
         isCalculatedToken,
         selector,
+        layer,
         //
         prefix,
         buildPath: `${outPath}/${theme}/`,
@@ -2730,12 +2776,12 @@ var semanticVariables = ({ outPath, theme }) => {
         files: [
           {
             destination: `semantic.css`,
-            format: cssVariables.name,
+            format: semantic.name,
             filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeights", "fontFamilies"], token)
           }
         ],
         options: {
-          fileHeader: fileHeader4,
+          fileHeader: fileHeader3,
           outputReferences: (token, options) => isCalculatedToken(token) && outputReferencesFilter(token, options)
         }
       }
@@ -2769,59 +2815,74 @@ var typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
           }
         ],
         options: {
-          fileHeader: fileHeader4
+          fileHeader: fileHeader3
         }
       }
     }
   };
 };
-var typographyCSS = ({ outPath, theme, typography }) => {
+var typographyCSS = ({ outPath, theme, typography: typography2 }) => {
+  const selector = `${typography2 === "primary" ? ":root, " : ""}[data-ds-typography="${typography2}"]`;
+  const layer = `ds.theme.typography.${typography2}`;
   return {
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
         prefix,
-        typography,
-        // selector,
+        typography: typography2,
+        selector,
+        layer,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
         transforms: [nameKebab.name, "ts/size/px", sizeRem.name, "ts/size/lineheight", "ts/typography/fontWeight"],
         files: [
           {
-            destination: `typography.css`,
-            format: cssClassesTypography.name,
+            destination: `typography/${typography2}.css`,
+            format: typography.name,
             filter: (token) => {
-              return typeEquals(["typography", "fontweights", "fontfamilies", "lineheights", "fontsizes"], token) && !(token.path[0] || "").startsWith("theme");
+              return typeEquals(
+                ["typography", "fontweights", "fontfamilies", "lineheights", "fontsizes", "letterSpacing"],
+                token
+              ) && !(token.path[0] || "").startsWith("theme");
             }
           }
         ],
         options: {
-          fileHeader: fileHeader4
+          fileHeader: fileHeader3
         }
       }
     }
   };
 };
-var getConfigs = (getConfig, outPath, tokensDir, themes) => Object.entries(themes).map(([name, tokensets]) => {
-  const setsWithPaths = tokensets.map((x) => `${tokensDir}/${x}.json`);
-  const [mode, theme, semantic, fontSize, typography] = processThemeName(name);
-  const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
-  const [source, include] = R7.partition(R7.test(paritionPrimitives), setsWithPaths);
+var getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutatedThemes.map((permutatedTheme) => {
+  const {
+    selectedTokenSets = [],
+    mode = "unknown",
+    theme = "unknown",
+    semantic: semantic2 = "unknown",
+    size = "unknown",
+    typography: typography2 = "unknown"
+  } = permutatedTheme;
+  if (hasUnknownProps(permutatedTheme)) {
+    throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
+  }
+  const setsWithPaths = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
+  const [source, include] = paritionPrimitives(setsWithPaths);
   const config_ = getConfig({
     outPath,
     theme,
     mode,
-    semantic,
-    fontSize,
-    typography
+    semantic: semantic2,
+    size,
+    typography: typography2
   });
   const config = {
     ...config_,
     source,
     include
   };
-  return { name: `${theme}-${mode}`, config };
+  return { mode, theme, semantic: semantic2, size, typography: typography2, config };
 }).sort();
 export {
   basePxFontSize,