@digdir/designsystemet 1.0.7 → 1.1.0

package/dist/bin/config.d.ts

@@ -0,0 +1,12 @@
+import type { Command, OptionValues } from '@commander-js/extra-typings';
+import { type ConfigSchemaBuild, type ConfigSchemaCreate } from '../src/config.js';
+export declare function readConfigFile(configPath: string, allowFileNotFound?: boolean): Promise<string>;
+export declare function parseCreateConfig(configFile: string, options: {
+    theme: string;
+    cmd: Command<unknown[], OptionValues>;
+    configPath: string;
+}): Promise<ConfigSchemaCreate>;
+export declare function parseBuildConfig(configFile: string, { configPath }: {
+    configPath: string;
+}): Promise<ConfigSchemaBuild>;
+//# sourceMappingURL=config.d.ts.map

package/dist/bin/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAGzE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EAKxB,MAAM,kBAAkB,CAAC;AAI1B,wBAAsB,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,iBAAiB,UAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAmBlG;AAED,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GACpF,OAAO,CAAC,kBAAkB,CAAC,CAqE7B;AAED,wBAAsB,gBAAgB,CACpC,UAAU,EAAE,MAAM,EAClB,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GACrC,OAAO,CAAC,iBAAiB,CAAC,CAI5B"}

package/dist/bin/config.js

@@ -0,0 +1,517 @@
+// bin/config.ts
+import path2 from "path";
+import chalk3 from "chalk";
+import * as R8 from "ramda";
+
+// src/config.ts
+import chalk from "chalk";
+import * as R7 from "ramda";
+import { z } from "zod/v4";
+import { fromError } from "zod-validation-error";
+
+// src/colors/colorMetadata.ts
+import * as R from "ramda";
+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));
+
+// 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",
+  "blue",
+  "green",
+  "orange",
+  "purple",
+  "red"
+];
+
+// src/tokens/create/defaults.ts
+import * as R3 from "ramda";
+
+// src/tokens/create/generators/color.ts
+import * as R4 from "ramda";
+
+// src/tokens/create/generators/semantic.ts
+import * as R5 from "ramda";
+
+// src/tokens/create/generators/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(path3) {
+  const normalisedPath = path3[0] === "themes" ? ["theme", ...R7.drop(2, path3)] : path3;
+  const option = R7.path(normalisedPath, cliOptions);
+  if (typeof option !== "string") {
+    return;
+  }
+  return option;
+}
+function makeFriendlyError(err) {
+  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 ${chalk.red(issuePath)}${optionMessage}:
+    ${issue.message} ${chalk.dim(errorCode)}`;
+    }).join("\n")
+  });
+}
+function validateConfig(schema, unvalidatedConfig, configPath) {
+  try {
+    return schema.parse(unvalidatedConfig);
+  } catch (err) {
+    console.error(chalk.redBright(`Invalid config file at ${chalk.red(configPath)}`));
+    const validationError = makeFriendlyError(err);
+    console.error(validationError.toString());
+    process.exit(1);
+  }
+}
+function parseConfig(schema, configFile, configPath) {
+  if (!configFile) {
+    return {};
+  }
+  try {
+    const parsedConfig = JSON.parse(configFile);
+    return schema.parse(parsedConfig);
+  } catch (err) {
+    console.error(chalk.redBright(`Failed parsing config file at ${chalk.red(configPath)}`));
+    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}`
+];
+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 themeSchema = z.object({
+  colors: z.object({
+    main: colorCategorySchema,
+    support: colorCategorySchema.optional().default({}),
+    neutral: colorSchema
+  }).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()
+}).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
+var configFileBuildSchema = 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" }),
+  clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional(),
+  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 combinedConfigSchema = configFileCreateSchema.extend(configFileBuildSchema.shape);
+
+// src/utils.ts
+import fs from "fs/promises";
+import chalk2 from "chalk";
+var readFile = async (path3, dry, allowFileNotFound) => {
+  if (dry) {
+    console.log(`${chalk2.blue("readFile")} ${path3}`);
+    return Promise.resolve("");
+  }
+  try {
+    return await fs.readFile(path3, "utf-8");
+  } catch (error) {
+    if (allowFileNotFound && error.code === "ENOENT") {
+      return "";
+    }
+    throw error;
+  }
+};
+
+// bin/options.ts
+var getOptionIfMatchingSource = (...sources) => (command, option) => {
+  const source = command.getOptionValueSource(option);
+  if (sources.includes(source)) {
+    return command.getOptionValue(option);
+  }
+};
+var getSuppliedCliOption = getOptionIfMatchingSource("cli");
+var getDefaultCliOption = getOptionIfMatchingSource("default");
+var getCliOption = getOptionIfMatchingSource("cli", "default");
+
+// bin/config.ts
+async function readConfigFile(configPath, allowFileNotFound = true) {
+  const resolvedPath = path2.resolve(process.cwd(), configPath);
+  let configFile;
+  try {
+    configFile = await readFile(resolvedPath, false, allowFileNotFound);
+  } catch (err) {
+    if (allowFileNotFound) {
+      return "";
+    }
+    console.error(chalk3.redBright(`Could not read config file at ${chalk3.blue(resolvedPath)}`));
+    throw err;
+  }
+  if (configFile) {
+    console.log(`Found config file: ${chalk3.green(resolvedPath)}`);
+  }
+  return configFile;
+}
+async function parseCreateConfig(configFile, options) {
+  const { cmd, theme = "theme", configPath } = options;
+  const configParsed = parseConfig(
+    configFileCreateSchema,
+    configFile,
+    configPath
+  );
+  const themeColors = Object.values(configParsed?.themes ?? {}).map(
+    (x) => /* @__PURE__ */ new Set([...R8.keys(x.colors.main), ...R8.keys(x.colors.support)])
+  );
+  if (!R8.all(R8.equals(R8.__, themeColors[0]), themeColors)) {
+    console.error(chalk3.redBright(`In config, all themes must have the same custom color names, but we found:`));
+    const themeNames = R8.keys(configParsed.themes ?? {});
+    themeColors.forEach((colors, index) => {
+      const colorNames = Array.from(colors);
+      console.log(`  - ${themeNames[index]}: ${colorNames.join(", ")}`);
+    });
+    console.log();
+    process.exit(1);
+  }
+  const noUndefined = R8.reject(R8.isNil);
+  const getThemeOptions = (optionGetter) => noUndefined({
+    colors: noUndefined({
+      main: optionGetter(cmd, "mainColors"),
+      support: optionGetter(cmd, "supportColors"),
+      neutral: optionGetter(cmd, "neutralColor")
+    }),
+    typography: noUndefined({
+      fontFamily: optionGetter(cmd, "fontFamily")
+    }),
+    borderRadius: optionGetter(cmd, "borderRadius"),
+    defaultColor: optionGetter(cmd, "defaultColor")
+  });
+  const unvalidatedConfig = noUndefined({
+    outDir: configParsed?.outDir ?? getCliOption(cmd, "outDir"),
+    clean: configParsed?.clean ?? getCliOption(cmd, "clean"),
+    themes: configParsed?.themes ? R8.map((jsonThemeValues) => {
+      const defaultThemeValues = getThemeOptions(getDefaultCliOption);
+      const cliThemeValues = getThemeOptions(getSuppliedCliOption);
+      const mergedConfigs = R8.mergeDeepRight(defaultThemeValues, R8.mergeDeepRight(jsonThemeValues, cliThemeValues));
+      return mergedConfigs;
+    }, configParsed.themes) : (
+      // If there are no themes specified in the JSON config, we use both explicit
+      // and default theme options from the CLI.
+      {
+        [theme]: getThemeOptions(getCliOption)
+      }
+    )
+  });
+  return validateConfig(configFileCreateSchema, unvalidatedConfig, configPath);
+}
+async function parseBuildConfig(configFile, { configPath }) {
+  const configParsed = parseConfig(configFileBuildSchema, configFile, configPath);
+  return validateConfig(configFileBuildSchema, configParsed, configPath);
+}
+export {
+  parseBuildConfig,
+  parseCreateConfig,
+  readConfigFile
+};