@digdir/designsystemet 1.0.2 → 1.0.4

package/dist/src/tokens/create/generators/semantic.js

@@ -0,0 +1,483 @@
+// src/tokens/create/generators/semantic.ts
+import * as R from "ramda";
+
+// src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
+var color_base_template_default = {
+  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}"
+      }
+    }
+  },
+  link: {
+    color: {
+      visited: {
+        $type: "color",
+        $value: "{global.purple.12}"
+      }
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
+var color_template_default = {
+  "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}"
+  }
+};
+
+// src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
+var color_template_default2 = {
+  "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}"
+  }
+};
+
+// src/tokens/create/generators/semantic.ts
+var generateSemantic = (colors) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const modes = {
+    "main-color": {},
+    "support-color": {}
+  };
+  const categories = [
+    ["main-color", mainColorNames],
+    ["support-color", supportColorNames]
+  ];
+  for (const [colorCategory, colorNames] of categories) {
+    for (const colorName of colorNames) {
+      const category = colorCategory.replace("-color", "");
+      const customColorTokens = {
+        color: {
+          [category]: JSON.parse(
+            JSON.stringify(
+              color_template_default2,
+              (key, value) => {
+                if (key === "$value") {
+                  return value.replace("<color>", colorName);
+                }
+                return value;
+              },
+              2
+            )
+          )
+        }
+      };
+      modes[colorCategory][colorName] = customColorTokens;
+    }
+  }
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const semanticColorTokens = customColors.map(
+    (colorName) => [
+      colorName,
+      R.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
+    ]
+  );
+  const color = {
+    ...color_base_template_default,
+    color: {
+      ...Object.fromEntries(semanticColorTokens),
+      ...color_base_template_default.color
+    }
+  };
+  return {
+    modes,
+    color
+  };
+};
+export {
+  generateSemantic
+};

package/dist/src/tokens/create/generators/theme.d.ts

@@ -0,0 +1,3 @@
+import type { Colors, TokenSet } from '../../types.js';
+export declare const generateTheme: (colors: Colors, themeName: string, borderRadius: number) => TokenSet;
+//# sourceMappingURL=theme.d.ts.map

package/dist/src/tokens/create/generators/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/theme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,EAAE,WAAW,MAAM,EAAE,cAAc,MAAM,aAyCpF,CAAC"}

package/dist/src/tokens/create/generators/theme.js

@@ -0,0 +1,168 @@
+// src/tokens/create/generators/theme.ts
+import * as R from "ramda";
+
+// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
+var theme_base_template_default = {
+  color: {},
+  "font-family": {
+    $type: "fontFamilies",
+    $value: "{<theme>.font-family}"
+  },
+  "font-weight": {
+    medium: {
+      $type: "fontWeights",
+      $value: "{<theme>.font-weight.medium}"
+    },
+    semibold: {
+      $type: "fontWeights",
+      $value: "{<theme>.font-weight.semibold}"
+    },
+    regular: {
+      $type: "fontWeights",
+      $value: "{<theme>.font-weight.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"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
+var theme_template_default = {
+  "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}"
+  }
+};
+
+// src/tokens/create/generators/theme.ts
+var generateTheme = (colors, themeName, borderRadius) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const themeColorTokens = Object.fromEntries(
+    customColors.map(
+      (colorName) => [
+        colorName,
+        R.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
+      ]
+    )
+  );
+  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
+  const themeFile = {
+    color: {
+      ...themeColorTokens,
+      ...themeBaseFileColor
+    },
+    ...remainingThemeFile
+  };
+  const baseBorderRadius = R.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R.set(baseBorderRadius, String(borderRadius), themeFile);
+  const token = JSON.parse(
+    JSON.stringify(
+      updatedThemeFile,
+      (key, value) => {
+        if (key === "$value") {
+          return value.replace("<theme>", themeName);
+        }
+        return value;
+      },
+      2
+    )
+  );
+  return token;
+};
+export {
+  generateTheme
+};

package/dist/src/tokens/create/generators/typography.d.ts

@@ -0,0 +1,3 @@
+import type { TokenSet, Typography } from '../../types.js';
+export declare const generateTypography: (themeName: string, { fontFamily }: Typography) => TokenSet;
+//# sourceMappingURL=typography.d.ts.map

package/dist/src/tokens/create/generators/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/typography.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE3D,eAAO,MAAM,kBAAkB,GAAI,WAAW,MAAM,EAAE,gBAAgB,UAAU,KAAG,QAMlF,CAAC"}

package/dist/src/tokens/create/generators/typography.js

@@ -0,0 +1,33 @@
+// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
+var typography_template_default = {
+  "<theme>": {
+    "font-family": {
+      $type: "fontFamilies",
+      $value: "<font-family>"
+    },
+    "font-weight": {
+      medium: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      semibold: {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
+    }
+  }
+};
+
+// src/tokens/create/generators/typography.ts
+var generateTypography = (themeName, { fontFamily }) => {
+  return JSON.parse(
+    JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
+  );
+};
+export {
+  generateTypography
+};