@digdir/designsystemet 1.0.3 → 1.0.4

package/dist/src/colors/theme.js

@@ -1,8 +1,274 @@
-import chroma from "chroma-js";
+// src/colors/theme.ts
+import chroma2 from "chroma-js";
+import * as R2 from "ramda";
+
+// src/colors/colorMetadata.ts
 import * as R from "ramda";
-import { colorMetadata, getColorMetadataByNumber } from "./colorMetadata.js";
-import { getLightnessFromHex, getLuminanceFromLightness } from "./utils.js";
-const RESERVED_COLORS = [
+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];
+};
+
+// src/colors/utils.ts
+import chroma from "chroma-js";
+import { Hsluv } from "hsluv";
+var getLuminanceFromLightness = (lightness) => {
+  const conv = new Hsluv();
+  conv.hsluv_l = lightness;
+  conv.hsluvToHex();
+  return chroma(conv.hex).luminance();
+};
+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",
@@ -14,18 +280,18 @@ const RESERVED_COLORS = [
   "purple",
   "red"
 ];
-const generateColorScale = (color, colorScheme) => {
+var generateColorScale = (color, colorScheme) => {
   let interpolationColor = color;
   if (colorScheme === "dark") {
-    const [L, C, H] = chroma(color).oklch();
+    const [L, C, H] = chroma2(color).oklch();
     const chromaModifier = 0.7;
-    interpolationColor = chroma(L, C * chromaModifier, H, "oklch").hex();
+    interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
   }
-  const colors = R.mapObjIndexed((colorData) => {
+  const colors = R2.mapObjIndexed((colorData) => {
     const luminance = colorData.luminance[colorScheme];
     return {
       ...colorData,
-      hex: chroma(interpolationColor).luminance(luminance).hex()
+      hex: chroma2(interpolationColor).luminance(luminance).hex()
     };
   }, colorMetadata);
   const baseColors = generateBaseColors(color, colorScheme);
@@ -42,12 +308,12 @@ const generateColorScale = (color, colorScheme) => {
   };
   return Object.values(colors);
 };
-const generateColorSchemes = (color) => ({
+var generateColorSchemes = (color) => ({
   light: generateColorScale(color, "light"),
   dark: generateColorScale(color, "dark"),
   contrast: generateColorScale(color, "contrast")
 });
-const generateBaseColors = (color, colorScheme) => {
+var generateBaseColors = (color, colorScheme) => {
   let colorLightness = getLightnessFromHex(color);
   if (colorScheme !== "light") {
     colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
@@ -55,26 +321,26 @@ const generateBaseColors = (color, colorScheme) => {
   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()
+    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()
   };
 };
-const generateColorContrast = (color, type) => {
+var generateColorContrast = (color, type) => {
   if (type === "default") {
-    return chroma.contrast(color, "#ffffff") >= chroma.contrast(color, "#000000") ? "#ffffff" : "#000000";
+    return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
   }
   if (type === "subtle") {
-    const contrastWhite = chroma.contrast(color, "#ffffff");
-    const contrastBlack = chroma.contrast(color, "#000000");
+    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 chroma(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
+    return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
   }
   return color;
 };
-const getCssVariable = (colorType, colorNumber) => {
+var getCssVariable = (colorType, colorNumber) => {
   return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
 };
 export {

package/dist/src/colors/utils.js

@@ -1,6 +1,7 @@
+// src/colors/utils.ts
 import chroma from "chroma-js";
 import { Hsluv } from "hsluv";
-const hexToCssHsl = (hex, valuesOnly = false) => {
+var hexToCssHsl = (hex, valuesOnly = false) => {
   const [h, s, l] = chroma(hex).hsl();
   const hRounded = Math.round(h);
   const sRounded = Math.round(s * 100);
@@ -8,23 +9,23 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
   const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
   return valuesOnly ? cssString : `hsl(${cssString})`;
 };
-const hexToHSL = (hex) => {
+var hexToHSL = (hex) => {
   const [h, s, l] = chroma(hex).hsl();
   return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
 };
-const hexToHsluv = (hex) => {
+var hexToHsluv = (hex) => {
   const conv = new Hsluv();
   conv.hex = hex;
   conv.hexToHsluv();
   return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
 };
-const hslArrToCss = (HSL) => {
+var hslArrToCss = (HSL) => {
   return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
 };
-const HSLToHex = (h, s, l) => {
+var HSLToHex = (h, s, l) => {
   return chroma.hsl(h, s / 100, l / 100).hex();
 };
-const hexToRgb = (hex, type = "255") => {
+var hexToRgb = (hex, type = "255") => {
   const rgb = chroma(hex).rgb();
   return {
     r: type === "255" ? rgb[0] : rgb[0] / 255,
@@ -32,12 +33,12 @@ const hexToRgb = (hex, type = "255") => {
     b: type === "255" ? rgb[2] : rgb[2] / 255
   };
 };
-const getContrastFromHex = (color1, color2) => {
+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);
 };
-const getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
+var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
   const conv = new Hsluv();
   conv.hex = mainColor;
   conv.hexToHsluv();
@@ -49,7 +50,7 @@ const getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
   const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
   return ratio;
 };
-const areColorsContrasting = (color1, color2, type = "aa") => {
+var areColorsContrasting = (color1, color2, type = "aa") => {
   const contrast = getContrastFromHex(color1, color2);
   if (contrast !== null) {
     if (type === "aaa") {
@@ -62,22 +63,22 @@ const areColorsContrasting = (color1, color2, type = "aa") => {
   }
   return false;
 };
-const isHexColor = (hex) => {
+var isHexColor = (hex) => {
   return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
 };
-const getLuminanceFromLightness = (lightness) => {
+var getLuminanceFromLightness = (lightness) => {
   const conv = new Hsluv();
   conv.hsluv_l = lightness;
   conv.hsluvToHex();
   return chroma(conv.hex).luminance();
 };
-const getLightnessFromHex = (hex) => {
+var getLightnessFromHex = (hex) => {
   const conv = new Hsluv();
   conv.hex = hex;
   conv.hexToHsluv();
   return conv.hsluv_l;
 };
-const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
+var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
   const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
   const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
   const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
@@ -90,7 +91,7 @@ const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
   }
   return false;
 };
-const convertToHex = (color) => {
+var convertToHex = (color) => {
   if (!color) {
     return "#000000";
   }
@@ -99,7 +100,7 @@ const convertToHex = (color) => {
   }
   return chroma(color).hex();
 };
-const rgbToHex = (rgb) => {
+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;

package/dist/{bin → src}/config.d.ts

@@ -1,6 +1,49 @@
 import { z } from 'zod';
 export declare function mapPathToOptionName(path: (string | number)[]): string | undefined;
 export declare const colorRegex: RegExp;
+declare const themeSchema: z.ZodObject<{
+    colors: z.ZodObject<{
+        main: z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>;
+        support: z.ZodDefault<z.ZodOptional<z.ZodEffects<z.ZodRecord<z.ZodString, z.ZodEffects<z.ZodString, `#${string}`, string>>, Record<string, `#${string}`>, Record<string, string>>>>;
+        neutral: z.ZodEffects<z.ZodString, `#${string}`, string>;
+    }, "strip", z.ZodTypeAny, {
+        neutral: `#${string}`;
+        main: Record<string, `#${string}`>;
+        support: Record<string, `#${string}`>;
+    }, {
+        neutral: string;
+        main: Record<string, string>;
+        support?: Record<string, string> | undefined;
+    }>;
+    typography: z.ZodOptional<z.ZodObject<{
+        fontFamily: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        fontFamily: string;
+    }, {
+        fontFamily: string;
+    }>>;
+    borderRadius: z.ZodOptional<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    colors: {
+        neutral: `#${string}`;
+        main: Record<string, `#${string}`>;
+        support: Record<string, `#${string}`>;
+    };
+    typography?: {
+        fontFamily: string;
+    } | undefined;
+    borderRadius?: number | undefined;
+}, {
+    colors: {
+        neutral: string;
+        main: Record<string, string>;
+        support?: Record<string, string> | undefined;
+    };
+    typography?: {
+        fontFamily: string;
+    } | undefined;
+    borderRadius?: number | undefined;
+}>;
 /**
  * This defines the structure of the JSON config file
  */
@@ -158,5 +201,7 @@ export declare const combinedConfigSchema: z.ZodObject<{
     }>;
     outDir: string;
 }>;
-export type CombinedConfigSchema = z.infer<typeof combinedConfigSchema>;
+export type Config = z.infer<typeof combinedConfigSchema>;
+export type ThemeConfig = z.infer<typeof themeSchema>;
+export {};
 //# sourceMappingURL=config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAKxB,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,sBAQ5D;AAWD,eAAO,MAAM,UAAU,QAA2C,CAAC;AAwBnE,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBhB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAC;AAChE,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,WAAW,CAAC,CAAC"}