@digdir/designsystemet 1.0.3 → 1.0.5

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

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

package/dist/src/tokens/template.js

@@ -1,99 +0,0 @@
-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 = {
-    ...originalColorJson,
-    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
-};

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

@@ -1,9 +0,0 @@
-import type { ColorScheme } from '../../colors/types.js';
-import type { Colors } from '../types.js';
-type ColorSchemes = Array<ColorScheme>;
-type Metadata = {
-    tokenSetOrder: string[];
-};
-export declare function generateMetadataJson(schemes: ColorSchemes, themes: string[], colors: Colors): Metadata;
-export {};
-//# sourceMappingURL=generate$metadata.d.ts.map

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

@@ -1 +0,0 @@
-{"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$themes.d.ts

@@ -1,12 +0,0 @@
-import { type ThemeObject } from '@tokens-studio/types';
-import type { ColorScheme } from '../../colors/types.js';
-import type { Colors } from '../types.js';
-type ColorSchemes = Array<ColorScheme>;
-type ThemeObject_ = ThemeObject & {
-    $figmaCollectionId?: string;
-    $figmaModeId?: string;
-    $figmaVariableReferences?: Record<string, string>;
-};
-export declare function generateThemesJson(colorSchemes: ColorSchemes, themes: string[], colors: Colors): ThemeObject_[];
-export {};
-//# sourceMappingURL=generate$themes.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"generate$themes.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$themes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM1C,KAAK,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAEvC,KAAK,YAAY,GAAG,WAAW,GAAG;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnD,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,YAAY,EAAE,CAU/G"}

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

@@ -1,161 +0,0 @@
-import crypto from "node:crypto";
-import { TokenSetStatus } from "@tokens-studio/types";
-const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
-const createHash = (text) => crypto.hash("sha1", text);
-function generateThemesJson(colorSchemes, themes, colors) {
-  return [
-    ...generateSizeGroup(),
-    ...generateThemesGroup(themes),
-    ...generateTypographyGroup(themes),
-    ...generateColorSchemesGroup(colorSchemes, themes),
-    generateSemanticGroup(),
-    ...generateColorGroup("main", colors),
-    ...generateColorGroup("support", colors)
-  ];
-}
-function generateSizeGroup() {
-  return [
-    {
-      id: "8b2c8cc86611a34b135cb22948666779361fd729",
-      name: "medium",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/medium": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:1",
-      group: "Size"
-    },
-    {
-      id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
-      name: "large",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/large": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:2",
-      group: "Size"
-    },
-    {
-      id: "fb11567729c298ca37c9da4e3a27716a23480824",
-      name: "small",
-      $figmaStyleReferences: {},
-      selectedTokenSets: {
-        "primitives/modes/size/small": TokenSetStatus.SOURCE,
-        "primitives/modes/size/global": TokenSetStatus.ENABLED,
-        "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
-      },
-      $figmaCollectionId: "VariableCollectionId:36248:20757",
-      $figmaModeId: "41630:3",
-      group: "Size"
-    }
-  ];
-}
-const colorSchemeDefaults = {
-  light: {
-    name: "Light",
-    selectedTokenSets: {},
-    id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:0"
-  },
-  dark: {
-    name: "Dark",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:1"
-  },
-  contrast: {
-    name: "Contrast",
-    selectedTokenSets: {},
-    id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
-    $figmaCollectionId: "VariableCollectionId:34811:5472",
-    $figmaModeId: "34811:2"
-  }
-};
-function generateColorSchemesGroup(colorSchemes, themes) {
-  return colorSchemes.map(
-    (scheme) => ({
-      ...colorSchemeDefaults[scheme],
-      selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
-        ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
-      ]),
-      group: "Color scheme"
-    })
-  );
-}
-function generateThemesGroup(themes) {
-  return themes.map(
-    (theme, index) => ({
-      id: createHash(theme),
-      $figmaCollectionId: "VariableCollectionId:36528:61712",
-      $figmaModeId: `40960:${index + 6}`,
-      // Start on 6 in Token Studio and Community file for some reason
-      name: theme,
-      selectedTokenSets: {
-        [`themes/${theme}`]: TokenSetStatus.ENABLED
-      },
-      group: "Theme"
-    })
-  );
-}
-function generateSemanticGroup() {
-  return {
-    id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
-    name: "Semantic",
-    selectedTokenSets: {
-      "semantic/style": TokenSetStatus.ENABLED,
-      "semantic/color": TokenSetStatus.ENABLED,
-      "primitives/globals": TokenSetStatus.SOURCE
-    },
-    $figmaCollectionId: "VariableCollectionId:34811:5976",
-    $figmaModeId: "34811:5",
-    group: "Semantic"
-  };
-}
-function generateColorGroup(group, colors) {
-  return Object.entries(colors[group]).map(
-    ([color]) => ({
-      id: createHash(`${group}-${color}`),
-      name: color,
-      selectedTokenSets: {
-        [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
-      },
-      group: `${capitalize(group)} color`
-    })
-  );
-}
-function generateTypographyGroup(themes) {
-  return [
-    {
-      id: "368d753fcac4455f289500eaa42e70dc0a03522f",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:2",
-      name: "Primary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    },
-    {
-      id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
-      $figmaCollectionId: "VariableCollectionId:36248:20769",
-      $figmaModeId: "36248:3",
-      name: "Secondary",
-      selectedTokenSets: Object.fromEntries(
-        themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
-      ),
-      group: "Typography"
-    }
-  ];
-}
-export {
-  generateThemesJson
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["../../../src/tokens/write.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAoB,KAAK,EAAE,MAAM,EAA8B,MAAM,YAAY,CAAC;AAS9F,eAAO,MAAM,SAAS,GAAI,MAAM,OAAO,WAAkC,CAAC;AAyB1E,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,WAAW,GAAU,SAAS,kBAAkB,kBA6K5D,CAAC"}

package/dist/src/tokens/write.js

@@ -1,177 +0,0 @@
-import fs from "node:fs/promises";
-import path from "node:path";
-import chalk from "chalk";
-import * as R from "ramda";
-import semanticColorBaseFile from "./design-tokens/template/semantic/color-base-file.json" with { type: "json" };
-import customColorTemplate from "./design-tokens/template/semantic/modes/category-color/category-color-template.json" with { type: "json" };
-import semanticColorTemplate from "./design-tokens/template/semantic/semantic-color-template.json" with { type: "json" };
-import themeBaseFile from "./design-tokens/template/themes/theme-base-file.json" with { type: "json" };
-import themeColorTemplate from "./design-tokens/template/themes/theme-color-template.json" with { type: "json" };
-import { cp, mkdir, writeFile } from "./utils.js";
-import { generateMetadataJson } from "./write/generate$metadata.js";
-import { generateThemesJson } from "./write/generate$themes.js";
-const DIRNAME = import.meta.dirname || __dirname;
-const DEFAULT_FILES_PATH = path.join(DIRNAME, "./design-tokens/default");
-const TEMPLATE_FILES_PATH = path.join(DIRNAME, "./design-tokens/template/");
-const stringify = (data) => JSON.stringify(data, null, 2);
-const generateColorSchemeFile = (scheme, name, tokens, outPath) => {
-  const path2 = `${outPath}/primitives/modes/color-scheme/${scheme}`;
-  return {
-    data: stringify(tokens),
-    path: path2,
-    filePath: `${path2}/${name}.json`
-  };
-};
-const generateTypographyFile = (folder, name, tokens, outPath) => {
-  const path2 = `${outPath}/primitives/modes/typography/${folder}`;
-  return {
-    data: stringify(tokens),
-    path: path2,
-    filePath: `${path2}/${name}.json`
-  };
-};
-const writeTokens = async (options) => {
-  const {
-    outDir,
-    tokens,
-    theme: { name: themeName, colors, borderRadius },
-    dry
-  } = options;
-  const targetDir = path.resolve(process.cwd(), String(outDir));
-  const $themesPath = path.join(targetDir, "$themes.json");
-  const $metadataPath = path.join(targetDir, "$metadata.json");
-  let themes = [themeName];
-  await mkdir(targetDir, dry);
-  try {
-    const $themes = await fs.readFile($themesPath, "utf-8");
-    const themeObjects = JSON.parse($themes) || [];
-    themes = R.pipe(
-      R.filter((obj) => R.toLower(obj.group || "") === "theme"),
-      R.map(R.prop("name")),
-      R.append(themeName),
-      R.uniq
-    )(themeObjects);
-  } catch (error) {
-  }
-  console.log(`Themes: ${chalk.blue(themes.join(", "))}`);
-  const $theme = generateThemesJson(["dark", "light"], themes, colors);
-  const $metadata = generateMetadataJson(["dark", "light"], themes, colors);
-  await writeFile($themesPath, stringify($theme), dry);
-  await writeFile($metadataPath, stringify($metadata), dry);
-  await cp(DEFAULT_FILES_PATH, targetDir, dry);
-  const mainColorNames = Object.keys(colors.main);
-  const supportColorNames = Object.keys(colors.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const defaultAccentColor = mainColorNames[0];
-  for (const [colorCategory, colorNames] of [
-    ["main", mainColorNames],
-    ["support", supportColorNames]
-  ]) {
-    const colorCategoryPath = path.join(targetDir, "semantic", "modes", `${colorCategory}-color`);
-    await mkdir(colorCategoryPath, dry);
-    for (const colorName of colorNames) {
-      const customColorFile = {
-        color: {
-          [colorCategory]: customColorTemplate
-        }
-      };
-      await writeFile(
-        path.join(colorCategoryPath, `${colorName}.json`),
-        JSON.stringify(
-          customColorFile,
-          (key, value) => {
-            if (key === "$value") {
-              return value.replace("<color>", colorName);
-            }
-            return value;
-          },
-          2
-        ),
-        dry
-      );
-    }
-  }
-  const semanticColorTokens = customColors.map(
-    (colorName) => [
-      colorName,
-      R.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), semanticColorTemplate)
-    ]
-  );
-  const semanticColors = {
-    ...semanticColorBaseFile,
-    color: {
-      ...Object.fromEntries(semanticColorTokens),
-      ...semanticColorBaseFile.color
-    }
-  };
-  await writeFile(
-    path.join(targetDir, `semantic/color.json`),
-    JSON.stringify(
-      semanticColors,
-      (key, value) => {
-        if (key === "$value") {
-          return value.replace("<accent-color>", defaultAccentColor);
-        }
-        return value;
-      },
-      2
-    ),
-    dry
-  );
-  await mkdir(path.join(targetDir, "themes"), dry);
-  const themeColorTokens = Object.fromEntries(
-    customColors.map(
-      (colorName) => [
-        colorName,
-        R.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), themeColorTemplate)
-      ]
-    )
-  );
-  const { color: themeBaseFileColor, ...remainingThemeFile } = themeBaseFile;
-  const themeFile = {
-    color: {
-      ...themeColorTokens,
-      ...themeBaseFileColor
-    },
-    ...remainingThemeFile
-  };
-  const baseBorderRadius = R.lensPath(["border-radius", "base", "$value"]);
-  const updatedThemeFile = R.set(baseBorderRadius, String(borderRadius), themeFile);
-  await writeFile(
-    path.join(targetDir, `themes/${themeName}.json`),
-    JSON.stringify(
-      updatedThemeFile,
-      (key, value) => {
-        if (key === "$value") {
-          return value.replace("<theme>", themeName);
-        }
-        return value;
-      },
-      2
-    ),
-    dry
-  );
-  const files = [
-    generateColorSchemeFile("light", themeName, tokens.colors.light[themeName], targetDir),
-    generateColorSchemeFile("light", "global", tokens.colors.light.global, targetDir),
-    generateColorSchemeFile("dark", themeName, tokens.colors.dark[themeName], targetDir),
-    generateColorSchemeFile("dark", "global", tokens.colors.dark.global, targetDir),
-    // generateColorSchemeFile('contrast', themeName, tokens.colors.contrast[themeName], targetDir),
-    // generateColorSchemeFile('contrast', 'global', tokens.colors.contrast.global, targetDir),
-    generateTypographyFile("primary", themeName, tokens.typography.primary, targetDir),
-    generateTypographyFile("secondary", themeName, tokens.typography.primary, targetDir)
-  ];
-  for (const file of files) {
-    const dirPath = path.resolve(file.path);
-    const filePath = path.resolve(file.filePath);
-    await mkdir(dirPath, dry);
-    await writeFile(filePath, file.data, dry);
-  }
-  console.log(
-    `Finished creating Designsystem design tokens in ${chalk.green(outDir)} for theme ${chalk.blue(themeName)}`
-  );
-};
-export {
-  stringify,
-  writeTokens
-};