@digdir/designsystemet 1.13.1 → 1.13.3

package/dist/src/config.js

@@ -1,459 +1,118 @@
-// src/config.ts
+import { baseColorNames, colorNames } from "./colors/colorMetadata.js";
+import { convertToHex } from "./colors/utils.js";
+import { RESERVED_COLORS } from "./colors/theme.js";
+import "./colors/index.js";
+import { cliOptions } from "./tokens/create.js";
 import pc from "picocolors";
-import * as R7 from "ramda";
+import * as R from "ramda";
 import { z } from "zod";
 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,
-    name: "background-default",
-    group: "background",
-    displayName: "Background Default",
-    description: {
-      long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
-      short: "Standard bakgrunnsfarge."
-    },
-    luminance: {
-      light: 1,
-      dark: 9e-3,
-      contrast: 1e-3
-    }
-  },
-  "background-tinted": {
-    number: 2,
-    name: "background-tinted",
-    group: "background",
-    displayName: "Background Tinted",
-    description: {
-      long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
-      short: "Bakgrunn med et hint av farge i seg."
-    },
-    luminance: {
-      light: 0.9,
-      dark: 0.014,
-      contrast: 65e-4
-    }
-  },
-  "surface-default": {
-    number: 3,
-    name: "surface-default",
-    group: "surface",
-    displayName: "Surface Default",
-    description: {
-      long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
-      short: "Standardfarge for overflater / komponenter."
-    },
-    luminance: {
-      light: 1,
-      dark: 0.021,
-      contrast: 0.015
-    }
-  },
-  "surface-tinted": {
-    number: 4,
-    name: "surface-tinted",
-    group: "surface",
-    displayName: "Surface Tinted",
-    description: {
-      long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
-      short: "Overflater / komponenter med et hint av farge i seg."
-    },
-    luminance: {
-      light: 0.81,
-      dark: 0.027,
-      contrast: 0.015
-    }
-  },
-  "surface-hover": {
-    number: 5,
-    name: "surface-hover",
-    group: "surface",
-    displayName: "Surface Hover",
-    description: {
-      long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
-      short: "Hover-farge til overflater / komponenter."
-    },
-    luminance: {
-      light: 0.7,
-      dark: 0.036,
-      contrast: 0.028
-    }
-  },
-  "surface-active": {
-    number: 6,
-    name: "surface-active",
-    group: "surface",
-    displayName: "Surface Active",
-    description: {
-      long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
-      short: "Active-farge til overflater / komponenter."
-    },
-    luminance: {
-      light: 0.59,
-      dark: 0.056,
-      contrast: 0.045
-    }
-  },
-  "border-subtle": {
-    number: 7,
-    name: "border-subtle",
-    group: "border",
-    displayName: "Border Subtle",
-    description: {
-      long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
-      short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
-    },
-    luminance: {
-      light: 0.5,
-      dark: 0.08,
-      contrast: 0.26
-    }
-  },
-  "border-default": {
-    number: 8,
-    name: "border-default",
-    group: "border",
-    displayName: "Border Default",
-    description: {
-      long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
-      short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
-    },
-    luminance: {
-      light: 0.19,
-      dark: 0.22,
-      contrast: 0.4
-    }
-  },
-  "border-strong": {
-    number: 9,
-    name: "border-strong",
-    group: "border",
-    displayName: "Border Strong",
-    description: {
-      long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
-      short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
-    },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.6
-    }
-  },
-  "text-subtle": {
-    number: 10,
-    name: "text-subtle",
-    group: "text",
-    displayName: "Text Subtle",
-    description: {
-      long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
-      short: "Tekst- og ikonfarge med lavere kontrast."
-    },
-    luminance: {
-      light: 0.11,
-      dark: 0.39,
-      contrast: 0.57
-    }
-  },
-  "text-default": {
-    number: 11,
-    name: "text-default",
-    group: "text",
-    displayName: "Text Default",
-    description: {
-      long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
-      short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
-    },
-    luminance: {
-      light: 0.0245,
-      dark: 0.84,
-      contrast: 0.86
-    }
-  },
-  "base-default": {
-    number: 12,
-    name: "base-default",
-    group: "base",
-    displayName: "Base Default",
-    description: {
-      long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
-      short: "Standardfarge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-hover": {
-    number: 13,
-    name: "base-hover",
-    group: "base",
-    displayName: "Base Hover",
-    description: {
-      long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
-      short: "Hover-farge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-active": {
-    number: 14,
-    name: "base-active",
-    group: "base",
-    displayName: "Base Active",
-    description: {
-      long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
-      short: "Active-farge for solide bakgrunner."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-contrast-subtle": {
-    number: 15,
-    name: "base-contrast-subtle",
-    group: "base",
-    displayName: "Contrast Subtle",
-    description: {
-      long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
-      short: "Farge med god kontrast mot Base-default."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  },
-  "base-contrast-default": {
-    number: 16,
-    name: "base-contrast-default",
-    group: "base",
-    displayName: "Contrast Default",
-    description: {
-      long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
-      short: "Farge med god kontrast mot Base-default og Base-hover."
-    },
-    luminance: {
-      light: 1,
-      dark: 1,
-      contrast: 1
-    }
-  }
-};
-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";
-import * as R2 from "ramda";
-
-// src/colors/utils.ts
-import chroma from "chroma-js";
-import Colorjs from "colorjs.io";
-import { Hsluv } from "hsluv";
-var convertToHex = (color) => {
-  if (!color) {
-    return "#000000";
-  }
-  if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
-    return color;
-  }
-  return chroma(color).hex();
-};
-
-// src/colors/theme.ts
-var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
-
-// src/colors/types.ts
-import * as R3 from "ramda";
-var semanticColorMap = {
-  "background-default": 1,
-  "background-tinted": 2,
-  "surface-default": 3,
-  "surface-tinted": 4,
-  "surface-hover": 5,
-  "surface-active": 6,
-  "border-subtle": 7,
-  "border-default": 8,
-  "border-strong": 9,
-  "text-subtle": 10,
-  "text-default": 11,
-  "base-default": 12,
-  "base-hover": 13,
-  "base-active": 14,
-  "base-contrast-subtle": 15,
-  "base-contrast-default": 16
-};
-var semanticColorNames = R3.keys(semanticColorMap);
-var semanticColorNumbers = R3.values(semanticColorMap);
-
-// src/tokens/create/generators/primitives/color-scheme.ts
-import * as R4 from "ramda";
-
-// src/tokens/create/generators/semantic/color.ts
-import * as R5 from "ramda";
-
-// src/tokens/create/generators/themes/theme.ts
-import * as R6 from "ramda";
-
-// src/tokens/create.ts
-var cliOptions = {
-  outDir: "out-dir",
-  clean: "clean",
-  tailwind: "tailwind",
-  theme: {
-    colors: {
-      main: "main-colors",
-      support: "support-colors",
-      neutral: "neutral-color"
-    },
-    typography: {
-      fontFamily: "font-family"
-    },
-    borderRadius: "border-radius"
-  }
-};
-
-// src/config.ts
-function mapPathToOptionName(path2) {
-  const normalisedPath = path2[0] === "themes" ? ["theme", ...R7.drop(2, path2)] : path2;
-  const option = R7.path(normalisedPath, cliOptions);
-  if (typeof option !== "string") {
-    return;
-  }
-  return option;
+//#region src/config.ts
+function mapPathToOptionName(path) {
+	const normalisedPath = path[0] === "themes" ? ["theme", ...R.drop(2, path)] : path;
+	const option = R.path(normalisedPath, cliOptions);
+	if (typeof option !== "string") return;
+	return option;
 }
 function makeFriendlyError(err) {
-  try {
-    return fromError(err, {
-      messageBuilder: (issues) => issues.map((issue) => {
-        const issuePath = issue.path.join(".");
-        const optionName = mapPathToOptionName(issue.path);
-        const errorCode = `(error code: ${issue.code})`;
-        const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
-        return `  - Error in JSON value ${pc.red(issuePath)}${optionMessage}:
+	try {
+		return fromError(err, { messageBuilder: (issues) => issues.map((issue) => {
+			const issuePath = issue.path.join(".");
+			const optionName = mapPathToOptionName(issue.path);
+			const errorCode = `(error code: ${issue.code})`;
+			const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
+			return `  - Error in JSON value ${pc.red(issuePath)}${optionMessage}:
       ${issue.message} ${pc.dim(errorCode)}`;
-      }).join("\n")
-    });
-  } catch (_err2) {
-    console.error(pc.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
-    console.error(err instanceof Error ? err.stack : "No stack trace available");
-  }
+		}).join("\n") });
+	} catch (_err2) {
+		console.error(pc.red(err instanceof Error ? err.message : "Unknown error occurred while parsing config file"));
+		console.error(err instanceof Error ? err.stack : "No stack trace available");
+	}
 }
+/**
+* Validates a configuration object against a provided Zod schema.
+*
+* @template T - The expected type of the validated configuration.
+* @param schema - A Zod schema used to validate the configuration object.
+* @param unvalidatedConfig - The configuration object to validate.
+* @returns The validated configuration object, typed as T.
+* @throws Exits the process with code 1 if validation fails, after logging a friendly error message.
+*/
 function validateConfig(schema, unvalidatedConfig, configFilePath) {
-  try {
-    return schema.parse(unvalidatedConfig);
-  } catch (err) {
-    console.error(pc.redBright(`Invalid config file at ${pc.red(configFilePath)}`));
-    const validationError = makeFriendlyError(err);
-    console.error(validationError?.toString());
-    process.exit(1);
-  }
+	try {
+		return schema.parse(unvalidatedConfig);
+	} catch (err) {
+		console.error(pc.redBright(`Invalid config file at ${pc.red(configFilePath)}`));
+		const validationError = makeFriendlyError(err);
+		console.error(validationError?.toString());
+		process.exit(1);
+	}
 }
 function parseConfig(configFile, configFilePath) {
-  if (!configFile) {
-    return {};
-  }
-  try {
-    return JSON.parse(configFile);
-  } catch (err) {
-    console.error(pc.redBright(`Failed parsing config file at ${pc.red(configFilePath)}`));
-    const validationError = makeFriendlyError(err);
-    console.error(validationError?.toString());
-    process.exit(1);
-  }
+	if (!configFile) return {};
+	try {
+		return JSON.parse(configFile);
+	} catch (err) {
+		console.error(pc.redBright(`Failed parsing config file at ${pc.red(configFilePath)}`));
+		const validationError = makeFriendlyError(err);
+		console.error(validationError?.toString());
+		process.exit(1);
+	}
 }
-var hexPatterns = [
-  // Hex colors: #000, #0000, #000000, #00000000
-  `#[0-9a-fA-F]{3}`,
-  `#[0-9a-fA-F]{4}`,
-  `#[0-9a-fA-F]{6}`,
-  `#[0-9a-fA-F]{8}`
+const hexPatterns = [
+	`#[0-9a-fA-F]{3}`,
+	`#[0-9a-fA-F]{4}`,
+	`#[0-9a-fA-F]{6}`,
+	`#[0-9a-fA-F]{8}`
 ];
-var reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
-var colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
-var colorSchema = z.string().regex(colorRegex).transform(convertToHex).describe(
-  `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
-);
-var colorCategorySchema = z.record(
-  z.string().regex(new RegExp(reservedColorsPattern, "i"), {
-    error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
-  }),
-  colorSchema,
-  {
-    error: "Color definitions must be hex color values"
-  }
-).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
-  error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
-}).describe("An object with one or more color definitions. The property name is used as the color name.");
-var colorModeOverrideSchema = z.object({
-  light: colorSchema.optional().describe("A hex color that overrides light mode"),
-  dark: colorSchema.optional().describe("A hex color that overrides dark mode")
-}).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 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 linkVisitedOverrideSchema = z.object({
-  light: colorSchema.optional().describe("A hex color that overrides light mode"),
-  dark: colorSchema.optional().describe("A hex color that overrides dark mode")
-}).describe('Overrides for the "link-visited" color');
-var focusOverrideSchema = z.object({
-  inner: z.object({
-    light: colorSchema.optional().describe("A hex color that overrides light mode"),
-    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
-  }).optional().describe('Overrides for the "focus-inner" color'),
-  outer: z.object({
-    light: colorSchema.optional().describe("A hex color that overrides light mode"),
-    dark: colorSchema.optional().describe("A hex color that overrides dark mode")
-  }).optional().describe('Overrides for the "focus-outer" color')
+const reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
+const colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
+const colorSchema = z.string().regex(colorRegex).transform(convertToHex).describe(`A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`);
+const colorCategorySchema = z.record(z.string().regex(new RegExp(reservedColorsPattern, "i"), { error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}` }), colorSchema, { error: "Color definitions must be hex color values" }).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), { error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}` }).describe("An object with one or more color definitions. The property name is used as the color name.");
+const colorModeOverrideSchema = z.object({
+	light: colorSchema.optional().describe("A hex color that overrides light mode"),
+	dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+}).describe("Override values for semantic color tokens like \"background-subtle\", \"border-default\", etc.");
+const colorWeightOverrideSchema = z.partialRecord(z.enum([...colorNames]), colorModeOverrideSchema).describe("The name of the color to add overrides for, e.g. \"accent\"");
+const semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
+const 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");
+const linkVisitedOverrideSchema = z.object({
+	light: colorSchema.optional().describe("A hex color that overrides light mode"),
+	dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+}).describe("Overrides for the \"link-visited\" color");
+const focusOverrideSchema = z.object({
+	inner: z.object({
+		light: colorSchema.optional().describe("A hex color that overrides light mode"),
+		dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+	}).optional().describe("Overrides for the \"focus-inner\" color"),
+	outer: z.object({
+		light: colorSchema.optional().describe("A hex color that overrides light mode"),
+		dark: colorSchema.optional().describe("A hex color that overrides dark mode")
+	}).optional().describe("Overrides for the \"focus-outer\" color")
 }).describe("Overrides for the focus colors");
-var overridesSchema = z.object({
-  colors: semanticColorOverrideSchema.optional(),
-  severity: severityColorOverrideSchema.optional(),
-  linkVisited: linkVisitedOverrideSchema.optional(),
-  focus: focusOverrideSchema.optional()
+const overridesSchema = z.object({
+	colors: semanticColorOverrideSchema.optional(),
+	severity: severityColorOverrideSchema.optional(),
+	linkVisited: linkVisitedOverrideSchema.optional(),
+	focus: focusOverrideSchema.optional()
 }).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
-var themeSchema = z.object({
-  colors: z.object({
-    main: colorCategorySchema,
-    support: colorCategorySchema.optional().default({}),
-    neutral: colorSchema.describe("A hex color, which is used for creating a color scale.")
-  }).meta({ description: "Defines the colors for this theme" }),
-  typography: z.object({
-    fontFamily: z.string().meta({ description: "Sets the font-family for this theme" })
-  }).describe("Defines the typography for a given theme").optional(),
-  borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
-  overrides: overridesSchema
+const themeSchema = z.object({
+	colors: z.object({
+		main: colorCategorySchema,
+		support: colorCategorySchema.optional().default({}),
+		neutral: colorSchema.describe("A hex color, which is used for creating a color scale.")
+	}).meta({ description: "Defines the colors for this theme" }),
+	typography: z.object({ fontFamily: z.string().meta({ description: "Sets the font-family for this theme" }) }).describe("Defines the typography for a given theme").optional(),
+	borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
+	overrides: overridesSchema
 }).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
-var commonConfig = z.object({
-  clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
-});
-var _configFileCreateSchema = z.object({
-  outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }),
-  themes: z.record(z.string(), themeSchema).meta({
-    description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
-  })
-}).required();
-var configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape);
-export {
-  colorRegex,
-  commonConfig,
-  configFileCreateSchema,
-  parseConfig,
-  validateConfig
-};
+const commonConfig = z.object({ clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional() });
+/**
+* This defines the structure of the final configuration file
+*/
+const configFileCreateSchema = z.object({
+	outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }),
+	themes: z.record(z.string(), themeSchema).meta({ description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name." })
+}).required().extend(commonConfig.shape);
+//#endregion
+export { colorRegex, commonConfig, configFileCreateSchema, parseConfig, validateConfig };