@digdir/designsystemet 0.1.0-next.22 → 0.1.0-next.24

package/dist/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json

@@ -0,0 +1,30 @@
+{
+  "<theme>": {
+    "main": {
+      "$type": "fontFamilies",
+      "$value": "IBM Plex Mono"
+    },
+    "bold": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontWeights",
+      "$value": "Medium"
+    },
+    "extra-bold": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontWeights",
+      "$value": "SemiBold"
+    },
+    "regular": {
+      "$type": "fontWeights",
+      "$value": "Regular"
+    }
+  }
+}

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/tokens/{formats → build/formats}/css.js

@@ -117,22 +117,20 @@ const typography = {
   .${classSelector(token)} {
     font-weight: ${getValue(token)};
   }`;
-            return {
-              ...acc,
+            return Object.assign(acc, {
               variables: [...acc.variables, format(token)],
               classes: [...acc.classes, className]
-            };
+            });
           }
           if (typeEquals("lineheight", token)) {
             const className = `
   .${classSelector(token)} {
     line-height: ${getValue(token)};
   }`;
-            return {
-              ...acc,
+            return Object.assign(acc, {
               variables: [...acc.variables, format(token)],
               classes: [...acc.classes, className]
-            };
+            });
           }
           if (typeEquals("typography", token)) {
             let references = [];
@@ -157,9 +155,9 @@ const typography = {
     ${fontWeightVar ? `font-weight: ${fontWeightVar};` : ""}
     ${letterSpacingVar ? `letter-spacing: ${letterSpacingVar};` : ""}
   }`;
-            return { ...acc, classes: [className, ...acc.classes] };
+            return Object.assign(acc, { classes: [className, ...acc.classes] });
           }
-          return { ...acc, variables: [...acc.variables, format(token)] };
+          return Object.assign(acc, { variables: [...acc.variables, format(token)] });
         },
         { variables: [], classes: [] }
       )

package/dist/src/tokens/{build.js → build/index.js}

@@ -7,7 +7,7 @@ import * as configs from "./configs.js";
 import { makeEntryFile } from "./utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
-async function run(options) {
+async function buildTokens(options) {
   const tokensDir = options.tokens;
   const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
   const outPath = path.resolve(options.out);
@@ -81,5 +81,5 @@ async function run(options) {
   }
 }
 export {
-  run
+  buildTokens
 };

package/dist/src/tokens/create/README.md

@@ -0,0 +1,3 @@
+```sh
+yarn workspace @digdir/designsystemet designsystemet tokens create --accent AD00BA --neutral 749ACB --brand1 D03539 --brand2 20E53A --brand3 F2F51E --font-family Arial --write ./../../../sandbox/test-tokens-august/design-tokens
+```