@digdir/designsystemet 0.1.0-next.21 → 0.1.0-next.23

package/dist/src/init/template/template-files/design-tokens/themes/theme-template.json

@@ -2,313 +2,333 @@
   "color": {
     "accent": {
       "1": {
-        "type": "color",
-        "value": "{<theme>.accent.1}"
+        "$type": "color",
+        "$value": "{<theme>.accent.1}"
       },
       "2": {
-        "type": "color",
-        "value": "{<theme>.accent.2}"
+        "$type": "color",
+        "$value": "{<theme>.accent.2}"
       },
       "3": {
-        "type": "color",
-        "value": "{<theme>.accent.3}"
+        "$type": "color",
+        "$value": "{<theme>.accent.3}"
       },
       "4": {
-        "type": "color",
-        "value": "{<theme>.accent.4}"
+        "$type": "color",
+        "$value": "{<theme>.accent.4}"
       },
       "5": {
-        "type": "color",
-        "value": "{<theme>.accent.5}"
+        "$type": "color",
+        "$value": "{<theme>.accent.5}"
       },
       "6": {
-        "type": "color",
-        "value": "{<theme>.accent.6}"
+        "$type": "color",
+        "$value": "{<theme>.accent.6}"
       },
       "7": {
-        "type": "color",
-        "value": "{<theme>.accent.7}"
+        "$type": "color",
+        "$value": "{<theme>.accent.7}"
       },
       "8": {
-        "type": "color",
-        "value": "{<theme>.accent.8}"
+        "$type": "color",
+        "$value": "{<theme>.accent.8}"
       },
       "9": {
-        "type": "color",
-        "value": "{<theme>.accent.9}"
+        "$type": "color",
+        "$value": "{<theme>.accent.9}"
       },
       "10": {
-        "type": "color",
-        "value": "{<theme>.accent.10}"
+        "$type": "color",
+        "$value": "{<theme>.accent.10}"
       },
       "11": {
-        "type": "color",
-        "value": "{<theme>.accent.11}"
+        "$type": "color",
+        "$value": "{<theme>.accent.11}"
       },
       "12": {
-        "type": "color",
-        "value": "{<theme>.accent.12}"
+        "$type": "color",
+        "$value": "{<theme>.accent.12}"
       },
       "13": {
-        "type": "color",
-        "value": "{<theme>.accent.13}"
+        "$type": "color",
+        "$value": "{<theme>.accent.13}"
       },
       "contrast-1": {
-        "type": "color",
-        "value": "{<theme>.accent.contrast-1}"
+        "$type": "color",
+        "$value": "{<theme>.accent.contrast-1}"
       },
       "contrast-2": {
-        "type": "color",
-        "value": "{<theme>.accent.contrast-2}"
+        "$type": "color",
+        "$value": "{<theme>.accent.contrast-2}"
       }
     },
     "neutral": {
       "1": {
-        "type": "color",
-        "value": "{<theme>.neutral.1}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.1}"
       },
       "2": {
-        "type": "color",
-        "value": "{<theme>.neutral.2}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.2}"
       },
       "3": {
-        "type": "color",
-        "value": "{<theme>.neutral.3}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.3}"
       },
       "4": {
-        "type": "color",
-        "value": "{<theme>.neutral.4}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.4}"
       },
       "5": {
-        "type": "color",
-        "value": "{<theme>.neutral.5}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.5}"
       },
       "6": {
-        "type": "color",
-        "value": "{<theme>.neutral.6}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.6}"
       },
       "7": {
-        "type": "color",
-        "value": "{<theme>.neutral.7}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.7}"
       },
       "8": {
-        "type": "color",
-        "value": "{<theme>.neutral.8}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.8}"
       },
       "9": {
-        "type": "color",
-        "value": "{<theme>.neutral.9}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.9}"
       },
       "10": {
-        "type": "color",
-        "value": "{<theme>.neutral.10}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.10}"
       },
       "11": {
-        "type": "color",
-        "value": "{<theme>.neutral.11}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.11}"
       },
       "12": {
-        "type": "color",
-        "value": "{<theme>.neutral.12}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.12}"
       },
       "13": {
-        "type": "color",
-        "value": "{<theme>.neutral.13}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.13}"
       },
       "contrast-1": {
-        "type": "color",
-        "value": "{<theme>.neutral.contrast-1}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.contrast-1}"
       },
       "contrast-2": {
-        "type": "color",
-        "value": "{<theme>.neutral.contrast-2}"
+        "$type": "color",
+        "$value": "{<theme>.neutral.contrast-2}"
       }
     },
     "brand1": {
       "1": {
-        "type": "color",
-        "value": "{<theme>.brand1.1}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.1}"
       },
       "2": {
-        "type": "color",
-        "value": "{<theme>.brand1.2}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.2}"
       },
       "3": {
-        "type": "color",
-        "value": "{<theme>.brand1.3}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.3}"
       },
       "4": {
-        "type": "color",
-        "value": "{<theme>.brand1.4}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.4}"
       },
       "5": {
-        "type": "color",
-        "value": "{<theme>.brand1.5}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.5}"
       },
       "6": {
-        "type": "color",
-        "value": "{<theme>.brand1.6}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.6}"
       },
       "7": {
-        "type": "color",
-        "value": "{<theme>.brand1.7}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.7}"
       },
       "8": {
-        "type": "color",
-        "value": "{<theme>.brand1.8}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.8}"
       },
       "9": {
-        "type": "color",
-        "value": "{<theme>.brand1.9}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.9}"
       },
       "10": {
-        "type": "color",
-        "value": "{<theme>.brand1.10}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.10}"
       },
       "11": {
-        "type": "color",
-        "value": "{<theme>.brand1.11}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.11}"
       },
       "12": {
-        "type": "color",
-        "value": "{<theme>.brand1.12}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.12}"
       },
       "13": {
-        "type": "color",
-        "value": "{<theme>.brand1.13}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.13}"
       },
       "contrast-1": {
-        "type": "color",
-        "value": "{<theme>.brand1.contrast-1}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.contrast-1}"
       },
       "contrast-2": {
-        "type": "color",
-        "value": "{<theme>.brand1.contrast-2}"
+        "$type": "color",
+        "$value": "{<theme>.brand1.contrast-2}"
       }
     },
     "brand2": {
       "1": {
-        "type": "color",
-        "value": "{<theme>.brand2.1}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.1}"
       },
       "2": {
-        "type": "color",
-        "value": "{<theme>.brand2.2}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.2}"
       },
       "3": {
-        "type": "color",
-        "value": "{<theme>.brand2.3}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.3}"
       },
       "4": {
-        "type": "color",
-        "value": "{<theme>.brand2.4}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.4}"
       },
       "5": {
-        "type": "color",
-        "value": "{<theme>.brand2.5}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.5}"
       },
       "6": {
-        "type": "color",
-        "value": "{<theme>.brand2.6}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.6}"
       },
       "7": {
-        "type": "color",
-        "value": "{<theme>.brand2.7}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.7}"
       },
       "8": {
-        "type": "color",
-        "value": "{<theme>.brand2.8}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.8}"
       },
       "9": {
-        "type": "color",
-        "value": "{<theme>.brand2.9}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.9}"
       },
       "10": {
-        "type": "color",
-        "value": "{<theme>.brand2.10}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.10}"
       },
       "11": {
-        "type": "color",
-        "value": "{<theme>.brand2.11}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.11}"
       },
       "12": {
-        "type": "color",
-        "value": "{<theme>.brand2.12}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.12}"
       },
       "13": {
-        "type": "color",
-        "value": "{<theme>.brand2.13}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.13}"
       },
       "contrast-1": {
-        "type": "color",
-        "value": "{<theme>.brand2.contrast-1}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.contrast-1}"
       },
       "contrast-2": {
-        "type": "color",
-        "value": "{<theme>.brand2.contrast-2}"
+        "$type": "color",
+        "$value": "{<theme>.brand2.contrast-2}"
       }
     },
     "brand3": {
       "1": {
-        "type": "color",
-        "value": "{<theme>.brand3.1}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.1}"
       },
       "2": {
-        "type": "color",
-        "value": "{<theme>.brand3.2}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.2}"
       },
       "3": {
-        "type": "color",
-        "value": "{<theme>.brand3.3}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.3}"
       },
       "4": {
-        "type": "color",
-        "value": "{<theme>.brand3.4}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.4}"
       },
       "5": {
-        "type": "color",
-        "value": "{<theme>.brand3.5}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.5}"
       },
       "6": {
-        "type": "color",
-        "value": "{<theme>.brand3.6}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.6}"
       },
       "7": {
-        "type": "color",
-        "value": "{<theme>.brand3.7}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.7}"
       },
       "8": {
-        "type": "color",
-        "value": "{<theme>.brand3.8}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.8}"
       },
       "9": {
-        "type": "color",
-        "value": "{<theme>.brand3.9}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.9}"
       },
       "10": {
-        "type": "color",
-        "value": "{<theme>.brand3.10}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.10}"
       },
       "11": {
-        "type": "color",
-        "value": "{<theme>.brand3.11}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.11}"
       },
       "12": {
-        "type": "color",
-        "value": "{<theme>.brand3.12}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.12}"
       },
       "13": {
-        "type": "color",
-        "value": "{<theme>.brand3.13}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.13}"
       },
       "contrast-1": {
-        "type": "color",
-        "value": "{<theme>.brand3.contrast-1}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.contrast-1}"
       },
       "contrast-2": {
-        "type": "color",
-        "value": "{<theme>.brand3.contrast-2}"
+        "$type": "color",
+        "$value": "{<theme>.brand3.contrast-2}"
       }
     }
+  },
+  "font": {
+    "family": {
+      "$type": "fontFamilies",
+      "$value": "{<theme>.main}"
+    }
+  },
+  "font-weight": {
+    "medium": {
+      "$type": "fontWeights",
+      "$value": "{<theme>.bold}"
+    },
+    "semibold": {
+      "$type": "fontWeights",
+      "$value": "{<theme>.extra-bold}"
+    },
+    "regular": {
+      "$type": "fontWeights",
+      "$value": "{<theme>.regular}"
+    }
   }
 }

package/dist/src/init/template/template-files/package.json

@@ -18,7 +18,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@digdir/designsystemet": "^0.1.0-alpha.7",
+    "@digdir/designsystemet": "^0.1.0-next.22",
     "rimraf": "^5.0.7"
   }
 }

package/dist/src/migrations/codemods/css/plugins.js

@@ -8,11 +8,11 @@ const cssClassRename = (dictionary) => ({
   Rule(rule) {
     const selector = rule.selector;
     if (!selector) return;
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!selector.includes(from)) return;
       const newSelector = selector.replace(new RegExp(from, "g"), to);
       rule.selector = newSelector;
-    });
+    }
   }
 });
 const cssVarRename = (dictionary) => ({
@@ -20,22 +20,21 @@ const cssVarRename = (dictionary) => ({
   Declaration(decl) {
     const { value, prop } = decl;
     const deleted = /* @__PURE__ */ new Set();
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!R.isEmpty(to)) {
-        switch (true) {
-          case R.includes(from, value):
-            to === "[delete]" && deleted.add(deleteMsg(decl, from));
-            decl.value = value.replace(from, to);
-            break;
-          case R.includes(from, prop):
-            if (decl.variable) {
-              to === "[delete]" && deleted.add(deleteMsg(decl, from));
-              decl.prop = prop.replace(from, to);
-              break;
-            }
+        if (R.includes(from, value)) {
+          if (to === "[delete]") {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.value = value.replace(from, to);
+        } else if (R.includes(from, prop) && decl.variable) {
+          if (to === "[delete]") {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.prop = prop.replace(from, to);
         }
       }
-    });
+    }
     if (deleted.size > 0) {
       Array.from(deleted).forEach(printDelete);
     }

package/dist/src/migrations/codemods/jsx/classname-prefix.js

@@ -5,11 +5,11 @@ const replaceInLiteral = (node) => {
   return node;
 };
 const replaceInTemplateLiteral = (node) => {
-  node.forEach((element) => {
+  for (const element of node) {
     const value = element.value.raw;
-    if (typeof value !== "string") return;
+    if (typeof value !== "string") continue;
     element.value.raw = replaceInLiteral(value);
-  });
+  }
 };
 const processNode = (node) => {
   if (!node) return;
@@ -46,11 +46,12 @@ const processNode = (node) => {
 function replaceClassNamePrefix(file, api) {
   const j = api.jscodeshift;
   const root = j(file.source);
-  root.find(j.JSXElement).forEach((path) => {
-    j(path).find(j.JSXAttribute, { name: { name: "className" } }).forEach((nodePath) => {
+  for (const path of root.find(j.JSXElement).paths()) {
+    const nodes = j(path).find(j.JSXAttribute, { name: { name: "className" } });
+    for (const nodePath of nodes.paths()) {
       processNode(nodePath.value.value);
-    });
-  });
+    }
+  }
   return root.toSource({
     quote: "single",
     reuseWhitespace: true,

package/dist/src/tokens/actions.js

@@ -18,7 +18,7 @@ const makeEntryFile = {
     }
     const generateImportUrls = R.pipe(
       sortLightmodeFirst,
-      R.map((file) => `@import url('./${theme}/${file.toString()}');`),
+      R.map((file) => `@import url('${theme}/${file.toString()}');`),
       R.join("\n")
     );
     const files = await glob(`**/*`, { cwd: platform.buildPath });

package/dist/src/tokens/build.js

@@ -4,12 +4,13 @@ import chalk from "chalk";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import * as configs from "./configs.js";
+import { makeEntryFile } from "./utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
 async function run(options) {
   const tokensDir = options.tokens;
   const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
-  const tokensOutDir = path.resolve(options.out);
+  const outPath = path.resolve(options.out);
   const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), "utf-8"));
   const relevant$themes = $themes.filter((theme) => {
     const group = R.toLower(R.defaultTo("")(theme.group));
@@ -20,9 +21,9 @@ async function run(options) {
   const typographyThemes = R.filter((val) => val.mode === "light", themes);
   const colormodeThemes = R.filter((val) => val.typography === "primary", themes);
   const semanticThemes = R.filter((val) => val.mode === "light" && val.typography === "primary", themes);
-  const colorModeConfigs = getConfigs(configs.colorModeVariables, tokensOutDir, tokensDir, colormodeThemes);
-  const semanticConfigs = getConfigs(configs.semanticVariables, tokensOutDir, tokensDir, semanticThemes);
-  const typographyConfigs = getConfigs(configs.typographyCSS, tokensOutDir, tokensDir, typographyThemes);
+  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes);
+  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes);
+  const typographyConfigs = getConfigs(configs.typographyCSS, outPath, tokensDir, typographyThemes);
   const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
   if (typographyConfigs.length > 0) {
     console.log(`
@@ -35,17 +36,6 @@ async function run(options) {
       })
     );
   }
-  if (semanticConfigs.length > 0) {
-    console.log(`
-\u{1F371} Building ${chalk.green("semantic")}`);
-    await Promise.all(
-      semanticConfigs.map(async ({ theme, config, semantic }) => {
-        console.log(`\u{1F477} ${theme} - ${semantic}`);
-        const typographyClasses = await sd.extend(config);
-        return typographyClasses.buildAllPlatforms();
-      })
-    );
-  }
   if (colorModeConfigs.length > 0) {
     console.log(`
 \u{1F371} Building ${chalk.green("color-mode")}`);
@@ -57,6 +47,17 @@ async function run(options) {
       })
     );
   }
+  if (semanticConfigs.length > 0) {
+    console.log(`
+\u{1F371} Building ${chalk.green("semantic")}`);
+    await Promise.all(
+      semanticConfigs.map(async ({ theme, config, semantic }) => {
+        console.log(`\u{1F477} ${theme} - ${semantic}`);
+        const typographyClasses = await sd.extend(config);
+        return typographyClasses.buildAllPlatforms();
+      })
+    );
+  }
   if (storefrontConfigs.length > 0 && options.preview) {
     console.log(`
 \u{1F371} Building ${chalk.green("Storefront preview tokens")}`);
@@ -68,6 +69,16 @@ async function run(options) {
       })
     );
   }
+  if (semanticConfigs.length > 0) {
+    console.log(`
+\u{1F371} Building ${chalk.green("CSS file")}`);
+    await Promise.all(
+      semanticConfigs.map(async ({ theme }) => {
+        console.log(`\u{1F477} ${theme}.css`);
+        return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
+      })
+    );
+  }
 }
 export {
   run