@digdir/designsystemet 0.0.0-deps-tsdown-20260421103939

package/dist/src/colors/colorMetadata.js

@@ -0,0 +1,259 @@
+import * as R from "ramda";
+//#region src/colors/colorMetadata.ts
+const baseColors = {
+	info: "#0A71C0",
+	success: "#068718",
+	warning: "#EA9B1B",
+	danger: "#C01B1B"
+};
+const dsLinkColor = "#663299";
+const colorMetadata = {
+	"background-default": {
+		number: 1,
+		name: "background-default",
+		group: "background",
+		displayName: "Background Default",
+		description: {
+			long: "Background Default er den mest nøytrale bakgrunnsfargen.",
+			short: "Standard bakgrunnsfarge."
+		},
+		luminance: {
+			light: 1,
+			dark: .009,
+			contrast: .001
+		}
+	},
+	"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: .9,
+			dark: .014,
+			contrast: .0065
+		}
+	},
+	"surface-default": {
+		number: 3,
+		name: "surface-default",
+		group: "surface",
+		displayName: "Surface Default",
+		description: {
+			long: "Surface Default brukes på flater som ligger oppå bakgrunnsfargene. Dette er den mest nøytrale surface fargen.",
+			short: "Standardfarge for overflater / komponenter."
+		},
+		luminance: {
+			light: 1,
+			dark: .021,
+			contrast: .015
+		}
+	},
+	"surface-tinted": {
+		number: 4,
+		name: "surface-tinted",
+		group: "surface",
+		displayName: "Surface Tinted",
+		description: {
+			long: "Surface Tinted brukes på flater som ligger oppå bakgrunnsfargene. Denne har et hint av farge i seg.",
+			short: "Overflater / komponenter med et hint av farge i seg."
+		},
+		luminance: {
+			light: .81,
+			dark: .027,
+			contrast: .015
+		}
+	},
+	"surface-hover": {
+		number: 5,
+		name: "surface-hover",
+		group: "surface",
+		displayName: "Surface Hover",
+		description: {
+			long: "Surface Hover brukes på interaktive flater som ligger oppå bakgrunnsfargene i en hover state.",
+			short: "Hover-farge til overflater / komponenter."
+		},
+		luminance: {
+			light: .7,
+			dark: .036,
+			contrast: .028
+		}
+	},
+	"surface-active": {
+		number: 6,
+		name: "surface-active",
+		group: "surface",
+		displayName: "Surface Active",
+		description: {
+			long: "Surface Active brukes på interaktive flater som ligger oppå bakgrunnsfargene i en active state.",
+			short: "Active-farge til overflater / komponenter."
+		},
+		luminance: {
+			light: .59,
+			dark: .056,
+			contrast: .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 å skille elementer fra hverandre.",
+			short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
+		},
+		luminance: {
+			light: .5,
+			dark: .08,
+			contrast: .26
+		}
+	},
+	"border-default": {
+		number: 8,
+		name: "border-default",
+		group: "border",
+		displayName: "Border Default",
+		description: {
+			long: "Border Default er en border-farge som brukes når man ønsker god kontrast mot bakgrunnsfargene.",
+			short: "Standard border-farge til skjemakomponenter og meningsbærende elementer."
+		},
+		luminance: {
+			light: .19,
+			dark: .22,
+			contrast: .4
+		}
+	},
+	"border-strong": {
+		number: 9,
+		name: "border-strong",
+		group: "border",
+		displayName: "Border Strong",
+		description: {
+			long: "Border Strong er den mørkeste border-fargen og brukes når man ønsker en veldig tydelig og sterk border.",
+			short: "Border-farge med høy kontrast for ekstra synlighet."
+		},
+		luminance: {
+			light: .11,
+			dark: .39,
+			contrast: .6
+		}
+	},
+	"text-subtle": {
+		number: 10,
+		name: "text-subtle",
+		group: "text",
+		displayName: "Text Subtle",
+		description: {
+			long: "Text Subtle er den lyseste tekstfargen og brukes på tekst som skal være litt mindre synlig eller for å skape variasjon i typografien.",
+			short: "Tekst- og ikonfarge med lavere kontrast."
+		},
+		luminance: {
+			light: .11,
+			dark: .39,
+			contrast: .57
+		}
+	},
+	"text-default": {
+		number: 11,
+		name: "text-default",
+		group: "text",
+		displayName: "Text Default",
+		description: {
+			long: "Text Default er den mørkeste tekstfargen og brukes på tekst som skal være mest synlig. Denne fargen bør brukes på mesteparten av teksten på en side.",
+			short: "Tekst- og ikonfarge med høy kontrast og god synlighet."
+		},
+		luminance: {
+			light: .0245,
+			dark: .84,
+			contrast: .86
+		}
+	},
+	"base-default": {
+		number: 12,
+		name: "base-default",
+		group: "base",
+		displayName: "Base Default",
+		description: {
+			long: "Base Default fargen får den samme hex koden som fargen som er valgt i verktøyet. Brukes ofte som farge på viktige elementer og på 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å 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å 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ærende farge oppå 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ærende farge oppå alle Base fargane.",
+			short: "Farge med god kontrast mot Base-default og Base-hover."
+		},
+		luminance: {
+			light: 1,
+			dark: 1,
+			contrast: 1
+		}
+	}
+};
+const colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+const getColorMetadataByNumber = (number) => {
+	return colorMetadataByNumber[number];
+};
+const colorNames = Object.keys(colorMetadata);
+const baseColorNames = Object.keys(baseColors);
+//#endregion
+export { baseColorNames, baseColors, colorMetadata, colorNames, dsLinkColor, getColorMetadataByNumber };

package/dist/src/colors/index.d.ts

@@ -0,0 +1,5 @@
+export * from './colorMetadata.js';
+export * from './theme.js';
+export * from './types.js';
+export * from './utils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/colors/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/dist/src/colors/index.js

@@ -0,0 +1,5 @@
+import { baseColorNames, baseColors, colorMetadata, colorNames, dsLinkColor, getColorMetadataByNumber } from "./colorMetadata.js";
+import { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex } from "./utils.js";
+import { RESERVED_COLORS, generateColorContrast, generateColorScale, generateColorSchemes, getCssVariable } from "./theme.js";
+import { semanticColorMap, semanticColorNames, semanticColorNumbers } from "./types.js";
+export { HSLToHex, RESERVED_COLORS, areColorsContrasting, baseColorNames, baseColors, canTextBeUsedOnColors, colorMetadata, colorNames, convertColor, convertToHex, dsLinkColor, generateColorContrast, generateColorScale, generateColorSchemes, getColorMetadataByNumber, getContrastFromHex, getContrastFromLightness, getCssVariable, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex, semanticColorMap, semanticColorNames, semanticColorNumbers };

package/dist/src/colors/theme.d.ts

@@ -0,0 +1,30 @@
+import type { Color, ColorNumber, ColorScheme, CssColor, ThemeInfo } from './types.js';
+export declare const RESERVED_COLORS: string[];
+/**
+ * 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
+ */
+export declare const generateColorScale: (color: CssColor, colorScheme: ColorScheme) => Color[];
+/**
+ * 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
+ */
+export declare const generateColorSchemes: (color: CssColor) => ThemeInfo;
+/**
+ * Generates contrast color for given color
+ *
+ * @param color color
+ * @param type 'default' | 'subtle'
+ */
+export declare const generateColorContrast: (color: CssColor, type: "default" | "subtle") => CssColor;
+/**
+ * Returns the css variable for a color.
+ * TODO: deprecate this
+ * @param colorType The type of color
+ * @param colorNumber The number of the color
+ */
+export declare const getCssVariable: (colorType: string, colorNumber: ColorNumber) => string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/src/colors/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAGvF,eAAO,MAAM,eAAe,UAAsD,CAAC;AAEnF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,QAAQ,EAAE,aAAa,WAAW,KAAG,KAAK,EAiCnF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,OAAO,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,QAAQ,EAAE,MAAM,SAAS,GAAG,QAAQ,KAAG,QAgBnF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,EAAE,aAAa,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -0,0 +1,111 @@
+import { colorMetadata, getColorMetadataByNumber } from "./colorMetadata.js";
+import { getLightnessFromHex, getLuminanceFromLightness } from "./utils.js";
+import * as R from "ramda";
+import chroma from "chroma-js";
+//#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);
+};
+/**
+* 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")
+});
+/**
+* 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()
+	};
+};
+/**
+* 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;
+};
+/**
+* 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.d.ts

@@ -0,0 +1,69 @@
+export type ColorScheme = 'light' | 'dark' | 'contrast';
+export type ContrastMode = 'aa' | 'aaa';
+export type ColorNumber = SemanticColorMap[keyof SemanticColorMap];
+export type ColorNames = keyof SemanticColorMap;
+export type GlobalColors = 'danger' | 'info' | 'success' | 'warning';
+export type ColorError = 'none' | 'decorative' | 'interaction';
+export declare const semanticColorMap: {
+    readonly 'background-default': 1;
+    readonly 'background-tinted': 2;
+    readonly 'surface-default': 3;
+    readonly 'surface-tinted': 4;
+    readonly 'surface-hover': 5;
+    readonly 'surface-active': 6;
+    readonly 'border-subtle': 7;
+    readonly 'border-default': 8;
+    readonly 'border-strong': 9;
+    readonly 'text-subtle': 10;
+    readonly 'text-default': 11;
+    readonly 'base-default': 12;
+    readonly 'base-hover': 13;
+    readonly 'base-active': 14;
+    readonly 'base-contrast-subtle': 15;
+    readonly 'base-contrast-default': 16;
+};
+export declare const semanticColorNames: ("background-default" | "background-tinted" | "surface-default" | "surface-tinted" | "surface-hover" | "surface-active" | "border-subtle" | "border-default" | "border-strong" | "text-subtle" | "text-default" | "base-default" | "base-hover" | "base-active" | "base-contrast-subtle" | "base-contrast-default")[];
+export declare const semanticColorNumbers: (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16)[];
+type SemanticColorMap = typeof semanticColorMap;
+type SemanticColorMapping = {
+    [K in keyof SemanticColorMap]: {
+        name: K;
+        number: SemanticColorMap[K];
+    };
+};
+export type ColorMetadataByName = {
+    [P in keyof SemanticColorMapping]: SemanticColorMapping[P] & ColorMetadata;
+};
+export type ColorMetadata = {
+    name: ColorNames;
+    number: ColorNumber;
+    displayName: string;
+    description: {
+        short: string;
+        long: string;
+    };
+    group: string;
+    luminance: {
+        light: number;
+        dark: number;
+        contrast: number;
+    };
+};
+export type Color = ColorMetadata & {
+    hex: CssColor;
+};
+export type ThemeInfo = {
+    light: Color[];
+    dark: Color[];
+    contrast: Color[];
+};
+/**
+ * Supported CSS colors in `designsystemet/color`
+ */
+export type CssColor = HexColor;
+/**
+ * Different color formats.
+ */
+export type HexColor = `#${string}`;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/colors/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,gBAAgB,CAAC,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,gBAAgB,CAAC;AAChD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;CAiBnB,CAAC;AAEX,eAAO,MAAM,kBAAkB,uTAA2B,CAAC;AAC3D,eAAO,MAAM,oBAAoB,0EAA6B,CAAC;AAE/D,KAAK,gBAAgB,GAAG,OAAO,gBAAgB,CAAC;AAEhD,KAAK,oBAAoB,GAAG;KACzB,CAAC,IAAI,MAAM,gBAAgB,GAAG;QAC7B,IAAI,EAAE,CAAC,CAAC;QACR,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;KAC7B;CACF,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;KAC/B,CAAC,IAAI,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,CAAC,CAAC,GAAG,aAAa;CAC3E,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,GAAG,EAAE,QAAQ,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,QAAQ,EAAE,KAAK,EAAE,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,QAAQ,CAAC;AAEhC;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,MAAM,EAAE,CAAC"}

package/dist/src/colors/types.js

@@ -0,0 +1,24 @@
+import * as R from "ramda";
+//#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 };

package/dist/src/colors/utils.d.ts

@@ -0,0 +1,128 @@
+import type { CssColor, HexColor } from './types.js';
+/**
+ * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'
+ *
+ * @param hex A hex color string
+ * @param valuesOnly If true, only the values are returned
+ * @returns A CSS HSL string
+ */
+export declare const hexToCssHsl: (hex: HexColor, valuesOnly?: boolean) => string;
+/**
+ * Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'
+ *
+ * @param H A Hex color string
+ * @returns HSL values in an array
+ */
+export declare const hexToHSL: (hex: HexColor) => number[];
+/**
+ * Converts a HEX color '#xxxxxx' into an array of HSLuv values '[h,s,l]'
+ *
+ * @param hex A hex color string
+ * @returns
+ */
+export declare const hexToHsluv: (hex: HexColor) => number[];
+/**
+ * Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'
+ *
+ * @param HSL A HSL number array '[h,s,l]'
+ * @returns A hex color string
+ */
+export declare const hslArrToCss: (HSL: number[]) => string;
+/**
+ * Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'
+ *
+ * @param h The HSL hue
+ * @param s The HSL saturation
+ * @param l The HSL lightness
+ * @returns HEX color string
+ */
+export declare const HSLToHex: (h: number, s: number, l: number) => HexColor;
+/**
+ * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
+ *
+ * @param hex A hex color string
+ * @param type The type of RGB values to return
+ * @returns RGB values in an array
+ */
+export declare const hexToRgb: (hex: string, type?: "255" | "1") => {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * Get the contrast ratio between two HEX colors
+ *
+ * @param color1 The first color to compare
+ * @param color2 The second color to compare
+ * @returns
+ */
+export declare const getContrastFromHex: (color1: HexColor, color2: HexColor) => number;
+/**
+ * Get the contrast ratio between two colors at a specific lightness
+ *
+ * @param lightness The lightness value
+ * @param mainColor The main color
+ * @param backgroundColor The background color
+ * @returns The contrast ratio
+ */
+export declare const getContrastFromLightness: (lightness: number, mainColor: CssColor, backgroundColor: CssColor) => number;
+/**
+ * Check if two colors have enough contrast to be used together
+ *
+ * @param color1 The first color
+ * @param color2 The second color
+ * @returns If the colors have enough contrast
+ */
+export declare const areColorsContrasting: (color1: CssColor, color2: CssColor, type?: "decorative" | "aa" | "aaa") => boolean;
+/**
+ * Check if aa string value is a HEX color
+ *
+ * @param hex The hex color
+ */
+export declare const isHexColor: (hex: string) => boolean;
+/**
+ * Get the luminance value from a lightness value
+ *
+ * @param lightness The lightness value
+ */
+export declare const getLuminanceFromLightness: (lightness: number) => number;
+/**
+ * Get the relative luminance from any valid css color
+ *
+ * @param color
+ */
+export declare const getLuminanceFromColor: (color: string) => number;
+/**
+ * Get the HSLuv lightness from a HEX color
+ *
+ * @param hex The hex color
+ */
+export declare const getLightnessFromHex: (hex: HexColor) => number;
+/**
+ *
+ * This function checks if white or black text can be used on 2 different colors at 4.5:1 contrast.
+ *
+ * @param baseDefaultColor Base default color
+ * @param baseActiveColor Base active color
+ */
+export declare const canTextBeUsedOnColors: (baseDefaultColor: CssColor, baseActiveColor: CssColor) => boolean;
+/**
+ * Converts a color to a HEX color
+ *
+ * @param color
+ * @returns
+ */
+export declare const convertToHex: (color?: string) => HexColor;
+export declare const rgbToHex: (rgb: {
+    r: number;
+    g: number;
+    b: number;
+}) => HexColor;
+/**
+ * Convert a color to a different format
+ *
+ * @param cssColor Any valid css color
+ * @param format Color space/format supported here https://colorjs.io/docs/spaces
+ */
+export declare const convertColor: (cssColor: string, format: string) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/colors/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/colors/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAErD;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,QAAQ,EAAE,oBAAkB,WAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,QAAQ,aAGrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,QAAQ,aAKvC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,WAExC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,KAAG,QAE1D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,KAAK,MAAM,EAAE,OAAM,KAAK,GAAG,GAAW;;;;CAO9D,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,QAAQ,EAAE,QAAQ,QAAQ,WAIpE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GAAI,WAAW,MAAM,EAAE,WAAW,QAAQ,EAAE,iBAAiB,QAAQ,WAYzG,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAQ,QAAQ,EAAE,QAAQ,QAAQ,EAAE,OAAM,YAAY,GAAG,IAAI,GAAG,KAAY,YAYhH,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,YAErC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GAAI,WAAW,MAAM,WAM1D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,WAElD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,KAAK,QAAQ,WAMhD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,kBAAkB,QAAQ,EAAE,iBAAiB,QAAQ,YAe1F,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,QAAQ,MAAM,KAAG,QAQ7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,KAAK;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,QAOnE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,EAAE,QAAQ,MAAM,WA0B5D,CAAC"}