@digdir/designsystemet 1.0.0-next.47 → 1.0.0-next.49

package/dist/src/tokens/design-tokens/template/semantic/color-base-file.json

@@ -5,7 +5,7 @@
         "$type": "color",
         "$value": "{global.green.1}"
       },
-      "background-subtle": {
+      "background-tinted": {
         "$type": "color",
         "$value": "{global.green.2}"
       },
@@ -13,53 +13,57 @@
         "$type": "color",
         "$value": "{global.green.3}"
       },
-      "surface-hover": {
+      "surface-tinted": {
         "$type": "color",
         "$value": "{global.green.4}"
       },
-      "surface-active": {
+      "surface-hover": {
         "$type": "color",
         "$value": "{global.green.5}"
       },
-      "border-subtle": {
+      "surface-active": {
         "$type": "color",
         "$value": "{global.green.6}"
       },
-      "border-default": {
+      "border-subtle": {
         "$type": "color",
         "$value": "{global.green.7}"
       },
-      "border-strong": {
+      "border-default": {
         "$type": "color",
         "$value": "{global.green.8}"
       },
-      "base-default": {
+      "border-strong": {
         "$type": "color",
         "$value": "{global.green.9}"
       },
-      "base-hover": {
+      "text-subtle": {
         "$type": "color",
         "$value": "{global.green.10}"
       },
-      "base-active": {
+      "text-default": {
         "$type": "color",
         "$value": "{global.green.11}"
       },
-      "text-subtle": {
+      "base-default": {
         "$type": "color",
         "$value": "{global.green.12}"
       },
-      "text-default": {
+      "base-hover": {
         "$type": "color",
         "$value": "{global.green.13}"
       },
-      "contrast-default": {
+      "base-active": {
         "$type": "color",
-        "$value": "{global.green.contrast-1}"
+        "$value": "{global.green.14}"
       },
-      "contrast-subtle": {
+      "base-contrast-subtle": {
         "$type": "color",
-        "$value": "{global.green.contrast-2}"
+        "$value": "{global.green.15}"
+      },
+      "base-contrast-default": {
+        "$type": "color",
+        "$value": "{global.green.16}"
       }
     },
     "danger": {
@@ -67,7 +71,7 @@
         "$type": "color",
         "$value": "{global.red.1}"
       },
-      "background-subtle": {
+      "background-tinted": {
         "$type": "color",
         "$value": "{global.red.2}"
       },
@@ -75,53 +79,57 @@
         "$type": "color",
         "$value": "{global.red.3}"
       },
-      "surface-hover": {
+      "surface-tinted": {
         "$type": "color",
         "$value": "{global.red.4}"
       },
-      "surface-active": {
+      "surface-hover": {
         "$type": "color",
         "$value": "{global.red.5}"
       },
-      "border-subtle": {
+      "surface-active": {
         "$type": "color",
         "$value": "{global.red.6}"
       },
-      "border-default": {
+      "border-subtle": {
         "$type": "color",
         "$value": "{global.red.7}"
       },
-      "border-strong": {
+      "border-default": {
         "$type": "color",
         "$value": "{global.red.8}"
       },
-      "base-default": {
+      "border-strong": {
         "$type": "color",
         "$value": "{global.red.9}"
       },
-      "base-hover": {
+      "text-subtle": {
         "$type": "color",
         "$value": "{global.red.10}"
       },
-      "base-active": {
+      "text-default": {
         "$type": "color",
         "$value": "{global.red.11}"
       },
-      "text-subtle": {
+      "base-default": {
         "$type": "color",
         "$value": "{global.red.12}"
       },
-      "text-default": {
+      "base-hover": {
         "$type": "color",
         "$value": "{global.red.13}"
       },
-      "contrast-default": {
+      "base-active": {
+        "$type": "color",
+        "$value": "{global.red.14}"
+      },
+      "base-contrast-subtle": {
         "$type": "color",
-        "$value": "{global.red.contrast-1}"
+        "$value": "{global.red.15}"
       },
-      "contrast-subtle": {
+      "base-contrast-default": {
         "$type": "color",
-        "$value": "{global.red.contrast-2}"
+        "$value": "{global.red.16}"
       }
     },
     "info": {
@@ -129,7 +137,7 @@
         "$type": "color",
         "$value": "{global.blue.1}"
       },
-      "background-subtle": {
+      "background-tinted": {
         "$type": "color",
         "$value": "{global.blue.2}"
       },
@@ -137,115 +145,123 @@
         "$type": "color",
         "$value": "{global.blue.3}"
       },
-      "surface-hover": {
+      "surface-tinted": {
         "$type": "color",
         "$value": "{global.blue.4}"
       },
-      "surface-active": {
+      "surface-hover": {
         "$type": "color",
         "$value": "{global.blue.5}"
       },
-      "border-subtle": {
+      "surface-active": {
         "$type": "color",
         "$value": "{global.blue.6}"
       },
-      "border-default": {
+      "border-subtle": {
         "$type": "color",
         "$value": "{global.blue.7}"
       },
-      "border-strong": {
+      "border-default": {
         "$type": "color",
         "$value": "{global.blue.8}"
       },
-      "base-default": {
+      "border-strong": {
         "$type": "color",
         "$value": "{global.blue.9}"
       },
-      "base-hover": {
+      "text-subtle": {
         "$type": "color",
         "$value": "{global.blue.10}"
       },
-      "base-active": {
+      "text-default": {
         "$type": "color",
         "$value": "{global.blue.11}"
       },
-      "text-subtle": {
+      "base-default": {
         "$type": "color",
         "$value": "{global.blue.12}"
       },
-      "text-default": {
+      "base-hover": {
         "$type": "color",
         "$value": "{global.blue.13}"
       },
-      "contrast-default": {
+      "base-active": {
         "$type": "color",
-        "$value": "{global.blue.contrast-1}"
+        "$value": "{global.blue.14}"
       },
-      "contrast-subtle": {
+      "base-contrast-subtle": {
         "$type": "color",
-        "$value": "{global.blue.contrast-2}"
+        "$value": "{global.blue.15}"
+      },
+      "base-contrast-default": {
+        "$type": "color",
+        "$value": "{global.blue.16}"
       }
     },
     "warning": {
       "background-default": {
         "$type": "color",
-        "$value": "{global.yellow.1}"
+        "$value": "{global.orange.1}"
       },
-      "background-subtle": {
+      "background-tinted": {
         "$type": "color",
-        "$value": "{global.yellow.2}"
+        "$value": "{global.orange.2}"
       },
       "surface-default": {
         "$type": "color",
-        "$value": "{global.yellow.3}"
+        "$value": "{global.orange.3}"
+      },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{global.orange.4}"
       },
       "surface-hover": {
         "$type": "color",
-        "$value": "{global.yellow.4}"
+        "$value": "{global.orange.5}"
       },
       "surface-active": {
         "$type": "color",
-        "$value": "{global.yellow.5}"
+        "$value": "{global.orange.6}"
       },
       "border-subtle": {
         "$type": "color",
-        "$value": "{global.yellow.6}"
+        "$value": "{global.orange.7}"
       },
       "border-default": {
         "$type": "color",
-        "$value": "{global.yellow.7}"
+        "$value": "{global.orange.8}"
       },
       "border-strong": {
-        "$type": "color",
-        "$value": "{global.yellow.8}"
-      },
-      "base-default": {
         "$type": "color",
         "$value": "{global.orange.9}"
       },
-      "base-hover": {
+      "text-subtle": {
         "$type": "color",
         "$value": "{global.orange.10}"
       },
-      "base-active": {
+      "text-default": {
         "$type": "color",
         "$value": "{global.orange.11}"
       },
-      "text-subtle": {
+      "base-default": {
         "$type": "color",
         "$value": "{global.orange.12}"
       },
-      "text-default": {
+      "base-hover": {
         "$type": "color",
         "$value": "{global.orange.13}"
       },
-      "contrast-default": {
+      "base-active": {
+        "$type": "color",
+        "$value": "{global.orange.14}"
+      },
+      "base-contrast-subtle": {
         "$type": "color",
-        "$value": "{global.orange.contrast-1}"
+        "$value": "{global.orange.15}"
       },
-      "contrast-subtle": {
+      "base-contrast-default": {
         "$type": "color",
-        "$value": "{global.orange.contrast-2}"
+        "$value": "{global.orange.16}"
       }
     },
     "focus": {

package/dist/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json

@@ -3,14 +3,18 @@
     "$type": "color",
     "$value": "{color.<color>.background-default}"
   },
-  "background-subtle": {
+  "background-tinted": {
     "$type": "color",
-    "$value": "{color.<color>.background-subtle}"
+    "$value": "{color.<color>.background-tinted}"
   },
   "surface-default": {
     "$type": "color",
     "$value": "{color.<color>.surface-default}"
   },
+  "surface-tinted": {
+    "$type": "color",
+    "$value": "{color.<color>.surface-tinted}"
+  },
   "surface-hover": {
     "$type": "color",
     "$value": "{color.<color>.surface-hover}"
@@ -31,6 +35,14 @@
     "$type": "color",
     "$value": "{color.<color>.border-strong}"
   },
+  "text-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.text-subtle}"
+  },
+  "text-default": {
+    "$type": "color",
+    "$value": "{color.<color>.text-default}"
+  },
   "base-default": {
     "$type": "color",
     "$value": "{color.<color>.base-default}"
@@ -43,20 +55,12 @@
     "$type": "color",
     "$value": "{color.<color>.base-active}"
   },
-  "text-subtle": {
-    "$type": "color",
-    "$value": "{color.<color>.text-subtle}"
-  },
-  "text-default": {
-    "$type": "color",
-    "$value": "{color.<color>.text-default}"
-  },
-  "contrast-default": {
+  "base-contrast-subtle": {
     "$type": "color",
-    "$value": "{color.<color>.contrast-default}"
+    "$value": "{color.<color>.base-contrast-subtle}"
   },
-  "contrast-subtle": {
+  "base-contrast-default": {
     "$type": "color",
-    "$value": "{color.<color>.contrast-subtle}"
+    "$value": "{color.<color>.base-contrast-default}"
   }
 }

package/dist/src/tokens/design-tokens/template/semantic/semantic-color-template.json

@@ -3,7 +3,7 @@
     "$type": "color",
     "$value": "{color.<color>.1}"
   },
-  "background-subtle": {
+  "background-tinted": {
     "$type": "color",
     "$value": "{color.<color>.2}"
   },
@@ -11,52 +11,56 @@
     "$type": "color",
     "$value": "{color.<color>.3}"
   },
-  "surface-hover": {
+  "surface-tinted": {
     "$type": "color",
     "$value": "{color.<color>.4}"
   },
-  "surface-active": {
+  "surface-hover": {
     "$type": "color",
     "$value": "{color.<color>.5}"
   },
-  "border-subtle": {
+  "surface-active": {
     "$type": "color",
     "$value": "{color.<color>.6}"
   },
-  "border-default": {
+  "border-subtle": {
     "$type": "color",
     "$value": "{color.<color>.7}"
   },
-  "border-strong": {
+  "border-default": {
     "$type": "color",
     "$value": "{color.<color>.8}"
   },
-  "base-default": {
+  "border-strong": {
     "$type": "color",
     "$value": "{color.<color>.9}"
   },
-  "base-hover": {
+  "text-subtle": {
     "$type": "color",
     "$value": "{color.<color>.10}"
   },
-  "base-active": {
+  "text-default": {
     "$type": "color",
     "$value": "{color.<color>.11}"
   },
-  "text-subtle": {
+  "base-default": {
     "$type": "color",
     "$value": "{color.<color>.12}"
   },
-  "text-default": {
+  "base-hover": {
     "$type": "color",
     "$value": "{color.<color>.13}"
   },
-  "contrast-default": {
+  "base-active": {
+    "$type": "color",
+    "$value": "{color.<color>.14}"
+  },
+  "base-contrast-subtle": {
     "$type": "color",
-    "$value": "{color.<color>.contrast-1}"
+    "$value": "{color.<color>.15}"
   },
-  "contrast-subtle": {
+  "base-contrast-default": {
     "$type": "color",
-    "$value": "{color.<color>.contrast-2}"
+    "$value": "{color.<color>.16}"
   }
 }

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

@@ -51,12 +51,16 @@
     "$type": "color",
     "$value": "{<theme>.<color>.13}"
   },
-  "contrast-1": {
+  "14": {
     "$type": "color",
-    "$value": "{<theme>.<color>.contrast-1}"
+    "$value": "{<theme>.<color>.14}"
   },
-  "contrast-2": {
+  "15": {
     "$type": "color",
-    "$value": "{<theme>.<color>.contrast-2}"
+    "$value": "{<theme>.<color>.15}"
+  },
+  "16": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.16}"
   }
 }

package/dist/src/tokens/template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAyG3B,CAAC"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAwG3B,CAAC"}

package/dist/src/tokens/template.js

@@ -3,7 +3,7 @@ import path from "node:path";
 import * as R from "ramda";
 import originalColorJson from "../../../../design-tokens/semantic/color.json" with { type: "json" };
 import originalColorCategoryJson from "../../../../design-tokens/semantic/modes/main-color/accent.json" with { type: "json" };
-import originalThemeJson from "../../../../design-tokens/themes/theme.json" with { type: "json" };
+import originalThemeJson from "../../../../design-tokens/themes/digdir.json" with { type: "json" };
 import { stringify } from "./write.js";
 const DIRNAME = import.meta.dirname || __dirname;
 const SOURCE_FILES_PATH = path.join(DIRNAME, "../../../../design-tokens");
@@ -16,7 +16,6 @@ const argsFromToPaths = (path_) => [
 const options = { recursive: true };
 const endsWithOneOf = (suffixes, str) => R.any((suffix) => R.endsWith(suffix, str), suffixes);
 const updateTemplates = async () => {
-  await fs.cp(...argsFromToPaths("Figma"), options);
   await fs.cp(...argsFromToPaths("primitives/globals.json"), options);
   await fs.cp(...argsFromToPaths("primitives/modes/size"), options);
   await fs.cp(...argsFromToPaths("primitives/modes/typography/size"), options);
@@ -47,12 +46,12 @@ const updateTemplates = async () => {
   await fs.mkdir(path.join(TEMPLATE_FILES_PATH, "themes"), options);
   await fs.writeFile(
     path.join(TEMPLATE_FILES_PATH, `themes/theme-base-file.json`),
-    JSON.stringify(themeBaseFile, null, 2).replaceAll("theme", "<theme>")
+    JSON.stringify(themeBaseFile, null, 2).replaceAll("digdir", "<theme>")
   );
   const themeColorTemplate = originalThemeJson.color.accent;
   await fs.writeFile(
     path.join(TEMPLATE_FILES_PATH, `themes/theme-color-template.json`),
-    JSON.stringify(themeColorTemplate, null, 2).replaceAll("theme.accent", "<theme>.<color>")
+    JSON.stringify(themeColorTemplate, null, 2).replaceAll("digdir.accent", "<theme>.<color>")
   );
   const themesFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "$themes.json"), "utf-8");
   const themesTemplate = JSON.parse(themesFile).filter((themeobj) => {
@@ -78,13 +77,13 @@ const updateTemplates = async () => {
   await fs.writeFile(path.join(TEMPLATE_FILES_PATH, `$themes.json`), stringify(themesTemplate));
   const metadataFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "$metadata.json"), "utf-8");
   const tokenSetOrderTemplate = JSON.parse(metadataFile).tokenSetOrder.filter((tokenSet) => {
-    if (endsWithOneOf(["theme2", "theme3", "theme4"], tokenSet)) {
+    if (endsWithOneOf(["altinn", "portal", "uutilsynet"], tokenSet)) {
       return false;
     }
     return true;
   }).map((tokenSet) => {
-    if (endsWithOneOf(["theme"], tokenSet)) {
-      return tokenSet.replace("/theme", "/<theme>");
+    if (endsWithOneOf(["digdir"], tokenSet)) {
+      return tokenSet.replace("/digdir", "/<theme>");
     }
     return tokenSet;
   });

package/dist/src/tokens/utils.js

@@ -65,7 +65,7 @@ const cleanDir = async (dir, dry) => {
     console.log(`${chalk.blue("cleanDir")} ${dir}`);
     return Promise.resolve();
   }
-  console.log(`${chalk.red("Cleaning outputDir: ")} ${dir}`);
+  console.log(`${chalk.red(`Cleaning outputDir: ${dir.trim()}`)} `);
   return await fs.rm(dir, { recursive: true, force: true });
 };
 export {

package/dist/src/tokens/write/generate$metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generate$metadata.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,KAAK,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAEvC,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAyBtG"}
+{"version":3,"file":"generate$metadata.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,KAAK,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAEvC,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAwBtG"}

package/dist/src/tokens/write/generate$metadata.js

@@ -19,8 +19,7 @@ function generateMetadataJson(schemes, themes, colors) {
       "semantic/color",
       ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
       ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
-      "semantic/style",
-      "Figma/components"
+      "semantic/style"
     ]
   };
 }