@digdir/designsystemet 1.0.8 → 1.1.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/colors/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}
+{"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

@@ -1,146 +1,3 @@
-// src/colors/utils.ts
-import chroma from "chroma-js";
-import Colorjs from "colorjs.io";
-import { Hsluv } from "hsluv";
-var hexToCssHsl = (hex, valuesOnly = false) => {
-  const [h, s, l] = chroma(hex).hsl();
-  const hRounded = Math.round(h);
-  const sRounded = Math.round(s * 100);
-  const lRounded = Math.round(l * 100);
-  const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
-  return valuesOnly ? cssString : `hsl(${cssString})`;
-};
-var hexToHSL = (hex) => {
-  const [h, s, l] = chroma(hex).hsl();
-  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
-};
-var hexToHsluv = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
-};
-var hslArrToCss = (HSL) => {
-  return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
-};
-var HSLToHex = (h, s, l) => {
-  return chroma.hsl(h, s / 100, l / 100).hex();
-};
-var hexToRgb = (hex, type = "255") => {
-  const rgb = chroma(hex).rgb();
-  return {
-    r: type === "255" ? rgb[0] : rgb[0] / 255,
-    g: type === "255" ? rgb[1] : rgb[1] / 255,
-    b: type === "255" ? rgb[2] : rgb[2] / 255
-  };
-};
-var getContrastFromHex = (color1, color2) => {
-  const lum1 = chroma(color1).luminance();
-  const lum2 = chroma(color2).luminance();
-  return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
-};
-var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
-  const conv = new Hsluv();
-  conv.hex = mainColor;
-  conv.hexToHsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  const lightMainColor = conv.hex;
-  const lum1 = chroma(lightMainColor).luminance();
-  const lum2 = chroma(backgroundColor).luminance();
-  const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
-  return ratio;
-};
-var areColorsContrasting = (color1, color2, type = "aa") => {
-  const contrast = getContrastFromHex(color1, color2);
-  if (contrast !== null) {
-    if (type === "aaa") {
-      return contrast >= 7;
-    }
-    if (type === "aa") {
-      return contrast >= 4.5;
-    }
-    return contrast >= 3;
-  }
-  return false;
-};
-var isHexColor = (hex) => {
-  return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
-};
-var getLuminanceFromLightness = (lightness) => {
-  const conv = new Hsluv();
-  conv.hsluv_l = lightness;
-  conv.hsluvToHex();
-  return chroma(conv.hex).luminance();
-};
-var getLuminanceFromColor = (color) => {
-  return chroma(color).luminance();
-};
-var getLightnessFromHex = (hex) => {
-  const conv = new Hsluv();
-  conv.hex = hex;
-  conv.hexToHsluv();
-  return conv.hsluv_l;
-};
-var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
-  const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
-  const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
-  const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
-  const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
-  if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
-    return true;
-  }
-  if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
-    return true;
-  }
-  return false;
-};
-var convertToHex = (color) => {
-  if (!color) {
-    return "#000000";
-  }
-  if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
-    return color;
-  }
-  return chroma(color).hex();
-};
-var rgbToHex = (rgb) => {
-  return `#${[rgb.r, rgb.g, rgb.b].map((x) => {
-    const hex = Math.round(x * 255).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  }).join("")}`;
-};
-var convertColor = (cssColor, format) => {
-  const color = new Colorjs(cssColor);
-  switch (format) {
-    case "rgb":
-    case "rgba":
-      return color.toString({
-        format: {
-          name: format,
-          coords: ["<number>[0, 255]", "<number>[0, 255]", "<number>[0, 255]"]
-        },
-        precision: 3
-      });
-    case "hex":
-      return color.toString({ format, precision: 3 });
-    case "hct":
-      return color.to(format).toString({
-        format: {
-          name: format,
-          coords: ["<number>", "<number>", "<number>"]
-        },
-        precision: 3
-      });
-    default:
-      return color.to(format).toString({ precision: 3 });
-  }
-};
-
-// src/colors/theme.ts
-import chroma2 from "chroma-js";
-import * as R2 from "ramda";
-
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
 var baseColors = {
@@ -397,6 +254,149 @@ var getColorMetadataByNumber = (number) => {
   return colorMetadataByNumber[number];
 };
 
+// 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 hexToCssHsl = (hex, valuesOnly = false) => {
+  const [h, s, l] = chroma(hex).hsl();
+  const hRounded = Math.round(h);
+  const sRounded = Math.round(s * 100);
+  const lRounded = Math.round(l * 100);
+  const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
+  return valuesOnly ? cssString : `hsl(${cssString})`;
+};
+var hexToHSL = (hex) => {
+  const [h, s, l] = chroma(hex).hsl();
+  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+};
+var hexToHsluv = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
+};
+var hslArrToCss = (HSL) => {
+  return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
+};
+var HSLToHex = (h, s, l) => {
+  return chroma.hsl(h, s / 100, l / 100).hex();
+};
+var hexToRgb = (hex, type = "255") => {
+  const rgb = chroma(hex).rgb();
+  return {
+    r: type === "255" ? rgb[0] : rgb[0] / 255,
+    g: type === "255" ? rgb[1] : rgb[1] / 255,
+    b: type === "255" ? rgb[2] : rgb[2] / 255
+  };
+};
+var getContrastFromHex = (color1, color2) => {
+  const lum1 = chroma(color1).luminance();
+  const lum2 = chroma(color2).luminance();
+  return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+};
+var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
+  const conv = new Hsluv();
+  conv.hex = mainColor;
+  conv.hexToHsluv();
+  conv.hsluv_l = lightness;
+  conv.hsluvToHex();
+  const lightMainColor = conv.hex;
+  const lum1 = chroma(lightMainColor).luminance();
+  const lum2 = chroma(backgroundColor).luminance();
+  const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+  return ratio;
+};
+var areColorsContrasting = (color1, color2, type = "aa") => {
+  const contrast = getContrastFromHex(color1, color2);
+  if (contrast !== null) {
+    if (type === "aaa") {
+      return contrast >= 7;
+    }
+    if (type === "aa") {
+      return contrast >= 4.5;
+    }
+    return contrast >= 3;
+  }
+  return false;
+};
+var isHexColor = (hex) => {
+  return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
+};
+var getLuminanceFromLightness = (lightness) => {
+  const conv = new Hsluv();
+  conv.hsluv_l = lightness;
+  conv.hsluvToHex();
+  return chroma(conv.hex).luminance();
+};
+var getLuminanceFromColor = (color) => {
+  return chroma(color).luminance();
+};
+var getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return conv.hsluv_l;
+};
+var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
+  const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
+  const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
+  const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
+  const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
+  if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
+    return true;
+  }
+  if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
+    return true;
+  }
+  return false;
+};
+var convertToHex = (color) => {
+  if (!color) {
+    return "#000000";
+  }
+  if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
+    return color;
+  }
+  return chroma(color).hex();
+};
+var rgbToHex = (rgb) => {
+  return `#${[rgb.r, rgb.g, rgb.b].map((x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }).join("")}`;
+};
+var convertColor = (cssColor, format) => {
+  const color = new Colorjs(cssColor);
+  switch (format) {
+    case "rgb":
+    case "rgba":
+      return color.toString({
+        format: {
+          name: format,
+          coords: ["<number>[0, 255]", "<number>[0, 255]", "<number>[0, 255]"]
+        },
+        precision: 3
+      });
+    case "hex":
+      return color.toString({ format, precision: 3 });
+    case "hct":
+      return color.to(format).toString({
+        format: {
+          name: format,
+          coords: ["<number>", "<number>", "<number>"]
+        },
+        precision: 3
+      });
+    default:
+      return color.to(format).toString({ precision: 3 });
+  }
+};
+
 // src/colors/theme.ts
 var RESERVED_COLORS = [
   "neutral",

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

@@ -1,5 +1,4 @@
-import type { CssColor } from './types.js';
-import type { Color, ColorNumber, ColorScheme, ThemeInfo } from './types.js';
+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.

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG7E,eAAO,MAAM,eAAe,UAW3B,CAAC;AAEF;;;;;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"}
+{"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,UAW3B,CAAC;AAEF;;;;;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/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAgC3B;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CASH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAc9F;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAyBnE,QAAA,MAAM,WAAW;;;;;;;;;;iBAiBmG,CAAC;AAErH,eAAO,MAAM,qBAAqB;;iBAEhC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;iBAYtB,CAAC;AAEd;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;iBAA6D,CAAC;AAC/F,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAiC3B;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EACpB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1C,UAAU,EAAE,MAAM,GACjB,CAAC,CASH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC,CAc9F;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAyBnE,QAAA,MAAM,WAAW;;;;;;;;;;iBAiBmG,CAAC;AAErH,eAAO,MAAM,qBAAqB;;iBAEhC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;iBAYtB,CAAC;AAEd;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;iBAA6D,CAAC;AAC/F,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,MAAM,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/src/config.js

@@ -1,26 +1,8 @@
 // src/config.ts
 import chalk from "chalk";
 import * as R7 from "ramda";
-import { fromError } from "zod-validation-error";
 import { z } from "zod/v4";
-
-// 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
-import chroma2 from "chroma-js";
-import * as R2 from "ramda";
+import { fromError } from "zod-validation-error";
 
 // src/colors/colorMetadata.ts
 import * as R from "ramda";
@@ -268,6 +250,24 @@ var colorMetadata = {
 };
 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",
@@ -298,6 +298,7 @@ import * as R6 from "ramda";
 var cliOptions = {
   outDir: "out-dir",
   clean: "clean",
+  tailwind: "tailwind",
   theme: {
     colors: {
       main: "main-colors",