@digdir/designsystemet 1.13.2 → 1.14.0

package/dist/src/colors/theme.js

@@ -1,350 +1,111 @@
-// src/colors/theme.ts
-import chroma2 from "chroma-js";
-import * as R2 from "ramda";
-
-// src/colors/colorMetadata.ts
+import { colorMetadata, getColorMetadataByNumber } from "./colorMetadata.js";
+import { getLightnessFromHex, getLuminanceFromLightness } from "./utils.js";
 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 getColorMetadataByNumber = (number) => {
-  return colorMetadataByNumber[number];
-};
-var colorNames = Object.keys(colorMetadata);
-var baseColorNames = Object.keys(baseColors);
-
-// src/colors/utils.ts
 import chroma from "chroma-js";
-import Colorjs from "colorjs.io";
-import { Hsluv } from "hsluv";
-var getLuminanceFromLightness = (lightness) => {
-  const conv = new Hsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  return chroma(conv.hex).luminance();
+//#region src/colors/theme.ts
+const RESERVED_COLORS = [
+	"neutral",
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+/**
+* Generates a color scale based on a base color and a color mode.
+*
+* @param color The base color that is used to generate the color scale
+* @param colorScheme The color scheme to generate a scale for
+*/
+const generateColorScale = (color, colorScheme) => {
+	let interpolationColor = color;
+	if (colorScheme === "dark") {
+		const [L, C, H] = chroma(color).oklch();
+		interpolationColor = chroma(L, C * .7, H, "oklch").hex();
+	}
+	const colors = R.mapObjIndexed((colorData) => {
+		const luminance = colorData.luminance[colorScheme];
+		return {
+			...colorData,
+			hex: chroma(interpolationColor).luminance(luminance).hex()
+		};
+	}, colorMetadata);
+	const baseColors = generateBaseColors(color, colorScheme);
+	colors["base-default"] = {
+		...colors["base-default"],
+		hex: baseColors.default
+	};
+	colors["base-hover"] = {
+		...colors["base-hover"],
+		hex: baseColors.hover
+	};
+	colors["base-active"] = {
+		...colors["base-active"],
+		hex: baseColors.active
+	};
+	colors["base-contrast-subtle"] = {
+		...colors["base-contrast-subtle"],
+		hex: generateColorContrast(baseColors.default, "subtle")
+	};
+	colors["base-contrast-default"] = {
+		...colors["base-contrast-default"],
+		hex: generateColorContrast(baseColors.default, "default")
+	};
+	return Object.values(colors);
 };
-var getLightnessFromHex = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return conv.hsluv_l;
-};
-
-// src/colors/theme.ts
-var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
-var generateColorScale = (color, colorScheme) => {
-  let interpolationColor = color;
-  if (colorScheme === "dark") {
-    const [L, C, H] = chroma2(color).oklch();
-    const chromaModifier = 0.7;
-    interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
-  }
-  const colors = R2.mapObjIndexed((colorData) => {
-    const luminance = colorData.luminance[colorScheme];
-    return {
-      ...colorData,
-      hex: chroma2(interpolationColor).luminance(luminance).hex()
-    };
-  }, colorMetadata);
-  const baseColors2 = generateBaseColors(color, colorScheme);
-  colors["base-default"] = { ...colors["base-default"], hex: baseColors2.default };
-  colors["base-hover"] = { ...colors["base-hover"], hex: baseColors2.hover };
-  colors["base-active"] = { ...colors["base-active"], hex: baseColors2.active };
-  colors["base-contrast-subtle"] = {
-    ...colors["base-contrast-subtle"],
-    hex: generateColorContrast(baseColors2.default, "subtle")
-  };
-  colors["base-contrast-default"] = {
-    ...colors["base-contrast-default"],
-    hex: generateColorContrast(baseColors2.default, "default")
-  };
-  return Object.values(colors);
-};
-var generateColorSchemes = (color) => ({
-  light: generateColorScale(color, "light"),
-  dark: generateColorScale(color, "dark"),
-  contrast: generateColorScale(color, "contrast")
+/**
+* Generates color schemes based on a base color. Light, Dark and Contrast scales are included.
+*
+* @param color The base color that is used to generate the color schemes
+*/
+const generateColorSchemes = (color) => ({
+	light: generateColorScale(color, "light"),
+	dark: generateColorScale(color, "dark"),
+	contrast: generateColorScale(color, "contrast")
 });
-var generateBaseColors = (color, colorScheme) => {
-  let colorLightness = getLightnessFromHex(color);
-  if (colorScheme !== "light") {
-    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
-  }
-  const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
-  const calculateLightness = (base, mod) => base - mod;
-  return {
-    default: colorScheme === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
-    hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
-    active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
-  };
-};
-var generateColorContrast = (color, type) => {
-  if (type === "default") {
-    return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
-  }
-  if (type === "subtle") {
-    const contrastWhite = chroma2.contrast(color, "#ffffff");
-    const contrastBlack = chroma2.contrast(color, "#000000");
-    const lightness = getLightnessFromHex(color);
-    const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
-    const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
-    return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
-  }
-  return color;
+/**
+* Returns the base colors for a color and color scheme.
+*
+* @param color The base color
+* @param colorScheme The color scheme to generate the base colors for
+* @returns
+*/
+const generateBaseColors = (color, colorScheme) => {
+	let colorLightness = getLightnessFromHex(color);
+	if (colorScheme !== "light") colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
+	const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
+	const calculateLightness = (base, mod) => base - mod;
+	return {
+		default: colorScheme === "light" ? color : chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
+		hover: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
+		active: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
+	};
 };
-var getCssVariable = (colorType, colorNumber) => {
-  return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
+/**
+* Generates contrast color for given color
+*
+* @param color color
+* @param type 'default' | 'subtle'
+*/
+const generateColorContrast = (color, type) => {
+	if (type === "default") return chroma.contrast(color, "#ffffff") >= chroma.contrast(color, "#000000") ? "#ffffff" : "#000000";
+	if (type === "subtle") {
+		const contrastWhite = chroma.contrast(color, "#ffffff");
+		const contrastBlack = chroma.contrast(color, "#000000");
+		const lightness = getLightnessFromHex(color);
+		const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
+		const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
+		return chroma(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
+	}
+	return color;
 };
-export {
-  RESERVED_COLORS,
-  generateColorContrast,
-  generateColorScale,
-  generateColorSchemes,
-  getCssVariable
+/**
+* Returns the css variable for a color.
+* TODO: deprecate this
+* @param colorType The type of color
+* @param colorNumber The number of the color
+*/
+const getCssVariable = (colorType, colorNumber) => {
+	return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
 };
+//#endregion
+export { RESERVED_COLORS, generateColorContrast, generateColorScale, generateColorSchemes, getCssVariable };

package/dist/src/colors/types.js

@@ -1,27 +1,24 @@
-// src/colors/types.ts
 import * as R 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 = R.keys(semanticColorMap);
-var semanticColorNumbers = R.values(semanticColorMap);
-export {
-  semanticColorMap,
-  semanticColorNames,
-  semanticColorNumbers
+//#region src/colors/types.ts
+const 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
 };
+const semanticColorNames = R.keys(semanticColorMap);
+const semanticColorNumbers = R.values(semanticColorMap);
+//#endregion
+export { semanticColorMap, semanticColorNames, semanticColorNumbers };