@digdir/designsystemet 1.6.1 → 1.7.0

package/dist/src/scripts/createJsonSchema.js

@@ -11,6 +11,12 @@ import { fromError } from "zod-validation-error";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
+var baseColors = {
+  info: "#0A71C0",
+  success: "#068718",
+  warning: "#EA9B1B",
+  danger: "#C01B1B"
+};
 var colorMetadata = {
   "background-default": {
     number: 1,
@@ -255,6 +261,7 @@ var colorMetadata = {
 };
 var colorMetadataByNumber = R.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";
@@ -275,18 +282,7 @@ var convertToHex = (color) => {
 };
 
 // src/colors/theme.ts
-var RESERVED_COLORS = [
-  "neutral",
-  "success",
-  "warning",
-  "danger",
-  "info",
-  "blue",
-  "green",
-  "orange",
-  "purple",
-  "red"
-];
+var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
 
 // src/tokens/create/defaults.ts
 import * as R3 from "ramda";
@@ -328,10 +324,12 @@ var colorModeOverrideSchema = z.object({
   light: colorSchema.optional(),
   dark: colorSchema.optional()
 }).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
-var colorWeightOverrideSchema = z.partialRecord(z.enum(colorNames), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
+var colorWeightOverrideSchema = z.partialRecord(z.enum([...colorNames]), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
 var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+var severityColorOverrideSchema = z.partialRecord(z.enum(baseColorNames), colorSchema.describe("A hex color, which is used for creating a color scale")).optional().describe("An object with severity color names as keys");
 var overridesSchema = z.object({
-  colors: semanticColorOverrideSchema.optional()
+  colors: semanticColorOverrideSchema.optional(),
+  severity: severityColorOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
 var themeSchema = z.object({
   colors: z.object({

package/dist/src/scripts/update-preview-tokens.js

@@ -321,7 +321,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"
@@ -1399,12 +1398,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,
@@ -1649,6 +1648,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";
@@ -1774,27 +1774,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]
+      }
     }
   };
 };
@@ -1805,270 +1802,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",
@@ -2084,7 +1817,7 @@ var color_base_template_default = {
     color: {
       visited: {
         $type: "color",
-        $value: "{global.purple.12}"
+        $value: "{color.link.visited}"
       }
     }
   }
@@ -2227,7 +1960,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 = {
@@ -2261,7 +1994,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)
@@ -2412,7 +2146,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) => [
@@ -2425,7 +2159,13 @@ var generateTheme = (colors, themeName, borderRadius) => {
   const themeFile = {
     color: {
       ...themeColorTokens,
-      ...themeBaseFileColor
+      ...themeBaseFileColor,
+      link: {
+        visited: {
+          $type: "color",
+          $value: `{${themeName}.link.visited}`
+        }
+      }
     },
     ...remainingThemeFile
   };
@@ -2481,7 +2221,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",
@@ -2496,7 +2236,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)],

package/dist/src/scripts/update-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-template.d.ts","sourceRoot":"","sources":["../../../src/scripts/update-template.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,eAAe,qBA+E3B,CAAC"}
+{"version":3,"file":"update-template.d.ts","sourceRoot":"","sources":["../../../src/scripts/update-template.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,eAAe,qBAwF3B,CAAC"}