@digdir/designsystemet 1.6.0 → 1.7.0

package/dist/src/tokens/create.js

@@ -999,12 +999,12 @@ import * as R4 from "ramda";
 // src/colors/colorMetadata.ts
 import * as R2 from "ramda";
 var baseColors = {
-  blue: "#0A71C0",
-  green: "#068718",
-  orange: "#EA9B1B",
-  purple: "#663299",
-  red: "#C01B1B"
+  info: "#0A71C0",
+  success: "#068718",
+  warning: "#EA9B1B",
+  danger: "#C01B1B"
 };
+var dsLinkColor = "#663299";
 var colorMetadata = {
   "background-default": {
     number: 1,
@@ -1249,6 +1249,7 @@ var colorMetadata = {
 };
 var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
 var colorNames = Object.keys(colorMetadata);
+var baseColorNames = Object.keys(baseColors);
 
 // src/colors/theme.ts
 import chroma2 from "chroma-js";
@@ -1374,27 +1375,24 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
     colors.support
   );
   const neutral = generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
+  const baseColorsWithOverrides = {
+    ...baseColors,
+    ...overrides?.severity
+  };
+  const globalColors = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
+    baseColorsWithOverrides
+  );
+  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme));
   return {
     [themeName]: {
       ...main,
       ...support,
-      neutral
-    }
-  };
-};
-var generateColorGlobal = (colorScheme) => {
-  const blueScale = generateColorScale(baseColors.blue, colorScheme);
-  const greenScale = generateColorScale(baseColors.green, colorScheme);
-  const orangeScale = generateColorScale(baseColors.orange, colorScheme);
-  const purpleScale = generateColorScale(baseColors.purple, colorScheme);
-  const redScale = generateColorScale(baseColors.red, colorScheme);
-  return {
-    global: {
-      blue: generateColor(blueScale),
-      green: generateColor(greenScale),
-      orange: generateColor(orangeScale),
-      purple: generateColor(purpleScale),
-      red: generateColor(redScale)
+      neutral,
+      ...globalColors,
+      link: {
+        visited: linkColor[12]
+      }
     }
   };
 };
@@ -1405,270 +1403,6 @@ import * as R5 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",
@@ -1684,7 +1418,7 @@ var color_base_template_default = {
     color: {
       visited: {
         $type: "color",
-        $value: "{global.purple.12}"
+        $value: "{color.link.visited}"
       }
     }
   }
@@ -1827,7 +1561,7 @@ var color_template_default2 = {
 };
 
 // src/tokens/create/generators/semantic.ts
-var generateSemantic = (colors) => {
+var generateSemantic = (colors, _themeName) => {
   const mainColorNames = Object.keys(colors.main);
   const supportColorNames = Object.keys(colors.support);
   const modes = {
@@ -1861,7 +1595,8 @@ var generateSemantic = (colors) => {
     }
   }
   const customColors = [...mainColorNames, "neutral", ...supportColorNames];
-  const semanticColorTokens = customColors.map(
+  const allColors = [...customColors, ...baseColorNames];
+  const semanticColorTokens = allColors.map(
     (colorName) => [
       colorName,
       R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
@@ -2012,7 +1747,7 @@ var theme_template_default = {
 var generateTheme = (colors, themeName, borderRadius) => {
   const mainColorNames = Object.keys(colors.main);
   const supportColorNames = Object.keys(colors.support);
-  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
   const themeColorTokens = Object.fromEntries(
     customColors.map(
       (colorName) => [
@@ -2025,7 +1760,13 @@ var generateTheme = (colors, themeName, borderRadius) => {
   const themeFile = {
     color: {
       ...themeColorTokens,
-      ...themeBaseFileColor
+      ...themeBaseFileColor,
+      link: {
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
+      }
     },
     ...remainingThemeFile
   };
@@ -2097,7 +1838,7 @@ var cliOptions = {
 var createTokens = async (opts) => {
   const { colors, typography, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
-  const semantic = generateSemantic(colors);
+  const semantic = generateSemantic(colors, name);
   const tokenSets = new Map([
     ...getDefaultTokens([
       "primitives/globals",
@@ -2112,7 +1853,6 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography)],
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography)],
     ...colorSchemes.flatMap((scheme) => [
-      [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
       [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)]
     ]),
     [`themes/${name}`, generateTheme(colors, name, borderRadius)],