@digdir/designsystemet 1.6.1 → 1.7.0

package/dist/src/tokens/format.js

@@ -255,7 +255,6 @@ function generateColorSchemesGroup(colorSchemes, themes) {
     (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"
@@ -1333,12 +1332,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,
@@ -1583,6 +1582,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";
@@ -1708,27 +1708,24 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
     colors.support
   );
   const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2), createColorOverrides("neutral"));
+  const baseColorsWithOverrides = {
+    ...baseColors,
+    ...overrides?.severity
+  };
+  const globalColors = R4.mapObjIndexed(
+    (color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
+    baseColorsWithOverrides
+  );
+  const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
   return {
     [themeName]: {
       ...main,
       ...support,
-      neutral
-    }
-  };
-};
-var generateColorGlobal = (colorScheme2) => {
-  const blueScale = generateColorScale(baseColors.blue, colorScheme2);
-  const greenScale = generateColorScale(baseColors.green, colorScheme2);
-  const orangeScale = generateColorScale(baseColors.orange, colorScheme2);
-  const purpleScale = generateColorScale(baseColors.purple, colorScheme2);
-  const redScale = generateColorScale(baseColors.red, colorScheme2);
-  return {
-    global: {
-      blue: generateColor(blueScale),
-      green: generateColor(greenScale),
-      orange: generateColor(orangeScale),
-      purple: generateColor(purpleScale),
-      red: generateColor(redScale)
+      neutral,
+      ...globalColors,
+      link: {
+        visited: linkColor[12]
+      }
     }
   };
 };
@@ -1739,270 +1736,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",
@@ -2018,7 +1751,7 @@ var color_base_template_default = {
     color: {
       visited: {
         $type: "color",
-        $value: "{global.purple.12}"
+        $value: "{color.link.visited}"
       }
     }
   }
@@ -2161,7 +1894,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 = {
@@ -2195,7 +1928,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)
@@ -2346,7 +2080,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) => [
@@ -2359,7 +2093,13 @@ var generateTheme = (colors, themeName, borderRadius) => {
   const themeFile = {
     color: {
       ...themeColorTokens,
-      ...themeBaseFileColor
+      ...themeBaseFileColor,
+      link: {
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
+      }
     },
     ...remainingThemeFile
   };
@@ -2415,7 +2155,7 @@ var generateTypography = (themeName, { fontFamily }) => {
 var createTokens = async (opts) => {
   const { colors, typography: typography2, name, borderRadius, overrides } = opts;
   const colorSchemes = ["light", "dark"];
-  const semantic2 = generateSemantic(colors);
+  const semantic2 = generateSemantic(colors, name);
   const tokenSets = new Map([
     ...getDefaultTokens([
       "primitives/globals",
@@ -2430,7 +2170,6 @@ var createTokens = async (opts) => {
     [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
     [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
     ...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)],
@@ -2451,7 +2190,7 @@ import * as R8 from "ramda";
 // package.json
 var package_default = {
   name: "@digdir/designsystemet",
-  version: "1.6.1",
+  version: "1.7.0",
   description: "CLI for Designsystemet",
   author: "Designsystemet team",
   engines: {
@@ -2524,9 +2263,9 @@ var package_default = {
     "object-hash": "^3.0.0",
     picocolors: "^1.1.1",
     postcss: "^8.5.6",
-    ramda: "^0.31.3",
-    "style-dictionary": "^5.1.0",
-    zod: "^4.1.11",
+    ramda: "^0.32.0",
+    "style-dictionary": "^5.1.1",
+    zod: "^4.1.12",
     "zod-validation-error": "^4.0.2"
   },
   devDependencies: {
@@ -2534,7 +2273,7 @@ var package_default = {
     "@types/apca-w3": "^0.1.3",
     "@types/chroma-js": "^3.1.1",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.18.8",
+    "@types/node": "^22.18.11",
     "@types/object-hash": "^3.0.6",
     "@types/ramda": "^0.31.1",
     "fs-extra": "^11.3.2",