@digdir/designsystemet 0.1.0-next.31 → 0.100.51-next.52

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

@@ -0,0 +1,278 @@
+{
+  "color": {
+    "success": {
+      "background-default": {
+        "$type": "color",
+        "$value": "{global.green.1}"
+      },
+      "background-tinted": {
+        "$type": "color",
+        "$value": "{global.green.2}"
+      },
+      "surface-default": {
+        "$type": "color",
+        "$value": "{global.green.3}"
+      },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{global.green.4}"
+      },
+      "surface-hover": {
+        "$type": "color",
+        "$value": "{global.green.5}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{global.green.6}"
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{global.green.7}"
+      },
+      "border-default": {
+        "$type": "color",
+        "$value": "{global.green.8}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{global.green.9}"
+      },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{global.green.10}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{global.green.11}"
+      },
+      "base-default": {
+        "$type": "color",
+        "$value": "{global.green.12}"
+      },
+      "base-hover": {
+        "$type": "color",
+        "$value": "{global.green.13}"
+      },
+      "base-active": {
+        "$type": "color",
+        "$value": "{global.green.14}"
+      },
+      "base-contrast-subtle": {
+        "$type": "color",
+        "$value": "{global.green.15}"
+      },
+      "base-contrast-default": {
+        "$type": "color",
+        "$value": "{global.green.16}"
+      }
+    },
+    "danger": {
+      "background-default": {
+        "$type": "color",
+        "$value": "{global.red.1}"
+      },
+      "background-tinted": {
+        "$type": "color",
+        "$value": "{global.red.2}"
+      },
+      "surface-default": {
+        "$type": "color",
+        "$value": "{global.red.3}"
+      },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{global.red.4}"
+      },
+      "surface-hover": {
+        "$type": "color",
+        "$value": "{global.red.5}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{global.red.6}"
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{global.red.7}"
+      },
+      "border-default": {
+        "$type": "color",
+        "$value": "{global.red.8}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{global.red.9}"
+      },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{global.red.10}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{global.red.11}"
+      },
+      "base-default": {
+        "$type": "color",
+        "$value": "{global.red.12}"
+      },
+      "base-hover": {
+        "$type": "color",
+        "$value": "{global.red.13}"
+      },
+      "base-active": {
+        "$type": "color",
+        "$value": "{global.red.14}"
+      },
+      "base-contrast-subtle": {
+        "$type": "color",
+        "$value": "{global.red.15}"
+      },
+      "base-contrast-default": {
+        "$type": "color",
+        "$value": "{global.red.16}"
+      }
+    },
+    "info": {
+      "background-default": {
+        "$type": "color",
+        "$value": "{global.blue.1}"
+      },
+      "background-tinted": {
+        "$type": "color",
+        "$value": "{global.blue.2}"
+      },
+      "surface-default": {
+        "$type": "color",
+        "$value": "{global.blue.3}"
+      },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{global.blue.4}"
+      },
+      "surface-hover": {
+        "$type": "color",
+        "$value": "{global.blue.5}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{global.blue.6}"
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{global.blue.7}"
+      },
+      "border-default": {
+        "$type": "color",
+        "$value": "{global.blue.8}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{global.blue.9}"
+      },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{global.blue.10}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{global.blue.11}"
+      },
+      "base-default": {
+        "$type": "color",
+        "$value": "{global.blue.12}"
+      },
+      "base-hover": {
+        "$type": "color",
+        "$value": "{global.blue.13}"
+      },
+      "base-active": {
+        "$type": "color",
+        "$value": "{global.blue.14}"
+      },
+      "base-contrast-subtle": {
+        "$type": "color",
+        "$value": "{global.blue.15}"
+      },
+      "base-contrast-default": {
+        "$type": "color",
+        "$value": "{global.blue.16}"
+      }
+    },
+    "warning": {
+      "background-default": {
+        "$type": "color",
+        "$value": "{global.orange.1}"
+      },
+      "background-tinted": {
+        "$type": "color",
+        "$value": "{global.orange.2}"
+      },
+      "surface-default": {
+        "$type": "color",
+        "$value": "{global.orange.3}"
+      },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{global.orange.4}"
+      },
+      "surface-hover": {
+        "$type": "color",
+        "$value": "{global.orange.5}"
+      },
+      "surface-active": {
+        "$type": "color",
+        "$value": "{global.orange.6}"
+      },
+      "border-subtle": {
+        "$type": "color",
+        "$value": "{global.orange.7}"
+      },
+      "border-default": {
+        "$type": "color",
+        "$value": "{global.orange.8}"
+      },
+      "border-strong": {
+        "$type": "color",
+        "$value": "{global.orange.9}"
+      },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{global.orange.10}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{global.orange.11}"
+      },
+      "base-default": {
+        "$type": "color",
+        "$value": "{global.orange.12}"
+      },
+      "base-hover": {
+        "$type": "color",
+        "$value": "{global.orange.13}"
+      },
+      "base-active": {
+        "$type": "color",
+        "$value": "{global.orange.14}"
+      },
+      "base-contrast-subtle": {
+        "$type": "color",
+        "$value": "{global.orange.15}"
+      },
+      "base-contrast-default": {
+        "$type": "color",
+        "$value": "{global.orange.16}"
+      }
+    },
+    "focus": {
+      "inner": {
+        "$type": "color",
+        "$value": "{color.neutral.background-default}"
+      },
+      "outer": {
+        "$type": "color",
+        "$value": "{color.neutral.text-default}"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+{
+  "background-default": {
+    "$type": "color",
+    "$value": "{color.<color>.background-default}"
+  },
+  "background-tinted": {
+    "$type": "color",
+    "$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}"
+  },
+  "surface-active": {
+    "$type": "color",
+    "$value": "{color.<color>.surface-active}"
+  },
+  "border-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.border-subtle}"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "{color.<color>.border-default}"
+  },
+  "border-strong": {
+    "$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}"
+  },
+  "base-hover": {
+    "$type": "color",
+    "$value": "{color.<color>.base-hover}"
+  },
+  "base-active": {
+    "$type": "color",
+    "$value": "{color.<color>.base-active}"
+  },
+  "base-contrast-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.base-contrast-subtle}"
+  },
+  "base-contrast-default": {
+    "$type": "color",
+    "$value": "{color.<color>.base-contrast-default}"
+  }
+}

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

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

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

@@ -0,0 +1,57 @@
+{
+  "color": {},
+  "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}"
+    }
+  },
+  "border-radius": {
+    "1": {
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*0.5,{border-radius.scale})"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "min({border-radius.base},{border-radius.scale}*2)"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*2,{border-radius.scale}*5)"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*3,{border-radius.scale}*7)"
+    },
+    "5": {
+      "$type": "dimension",
+      "$value": "{border-radius.base}"
+    },
+    "6": {
+      "$type": "dimension",
+      "$value": "9999"
+    },
+    "base": {
+      "$type": "dimension",
+      "$value": "4"
+    },
+    "scale": {
+      "$type": "dimension",
+      "$value": "4"
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+{
+  "1": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.1}"
+  },
+  "2": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.2}"
+  },
+  "3": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.3}"
+  },
+  "4": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.4}"
+  },
+  "5": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.5}"
+  },
+  "6": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.6}"
+  },
+  "7": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.7}"
+  },
+  "8": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.8}"
+  },
+  "9": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.9}"
+  },
+  "10": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.10}"
+  },
+  "11": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.11}"
+  },
+  "12": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.12}"
+  },
+  "13": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.13}"
+  },
+  "14": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.14}"
+  },
+  "15": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.15}"
+  },
+  "16": {
+    "$type": "color",
+    "$value": "{<theme>.<color>.16}"
+  }
+}

package/dist/src/tokens/index.d.ts

@@ -0,0 +1,3 @@
+export { createTokens, cliOptions } from './create.js';
+export type { Theme as CreateTokensOptions } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/tokens/index.js

@@ -1,4 +1,5 @@
-import { createTokens } from "./create/index.js";
+import { createTokens, cliOptions } from "./create.js";
 export {
+  cliOptions,
   createTokens
 };

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

@@ -0,0 +1,2 @@
+export declare const updateTemplates: () => Promise<void>;
+//# sourceMappingURL=template.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,98 @@
+import fs from "node:fs/promises";
+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/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");
+const DEFAULT_FILES_PATH = path.join(DIRNAME, "./design-tokens/default");
+const TEMPLATE_FILES_PATH = path.join(DIRNAME, "./design-tokens/template");
+const argsFromToPaths = (path_) => [
+  path.join(SOURCE_FILES_PATH, path_),
+  path.join(DEFAULT_FILES_PATH, path_)
+];
+const options = { recursive: true };
+const endsWithOneOf = (suffixes, str) => R.any((suffix) => R.endsWith(suffix, str), suffixes);
+const updateTemplates = async () => {
+  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);
+  await fs.cp(...argsFromToPaths("semantic/style.json"), options);
+  const categoryColorTemplate = originalColorCategoryJson.color.main;
+  const categoryDir = path.join(TEMPLATE_FILES_PATH, "semantic/modes/category-color");
+  await fs.mkdir(categoryDir, options);
+  await fs.writeFile(
+    path.join(categoryDir, "category-color-template.json"),
+    JSON.stringify(categoryColorTemplate, null, 2).replaceAll("color.accent", "color.<color>")
+  );
+  const colorBaseFile = {
+    color: R.omit(["accent", "neutral", "brand1", "brand2", "brand3"], originalColorJson.color)
+  };
+  await fs.writeFile(
+    path.join(TEMPLATE_FILES_PATH, `semantic/color-base-file.json`),
+    JSON.stringify(colorBaseFile, null, 2).replaceAll("color.accent", "color.<accent-color>")
+  );
+  const semanticColorTemplate = originalColorJson.color.accent;
+  await fs.writeFile(
+    path.join(TEMPLATE_FILES_PATH, `semantic/semantic-color-template.json`),
+    JSON.stringify(semanticColorTemplate, null, 2).replaceAll("color.accent", "color.<color>")
+  );
+  const themeBaseFile = {
+    color: {},
+    ...R.omit(["color"], originalThemeJson)
+  };
+  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("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("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) => {
+    if (R.toLower(themeobj.name) === "compact" && R.toLower(themeobj.group || "") === "size") {
+      return false;
+    }
+    if (R.toLower(themeobj.name) !== "digdir" && R.toLower(themeobj.group || "") === "theme") {
+      return false;
+    }
+    return true;
+  }).map((themeobj) => {
+    if (R.toLower(themeobj.name) === "digdir") {
+      return {
+        ...themeobj,
+        name: "<theme>",
+        selectedTokenSets: {
+          "themes/<theme>": "enabled"
+        }
+      };
+    }
+    return themeobj;
+  });
+  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(["altinn", "portal", "uutilsynet"], tokenSet)) {
+      return false;
+    }
+    return true;
+  }).map((tokenSet) => {
+    if (endsWithOneOf(["digdir"], tokenSet)) {
+      return tokenSet.replace("/digdir", "/<theme>");
+    }
+    return tokenSet;
+  });
+  await fs.writeFile(
+    path.join(TEMPLATE_FILES_PATH, `$metadata.json`),
+    stringify({ tokenSetOrder: tokenSetOrderTemplate })
+  );
+};
+updateTemplates();
+export {
+  updateTemplates
+};