@digdir/designsystemet 1.0.3 → 1.0.4

package/dist/src/tokens/create/generators/color.js

@@ -0,0 +1,374 @@
+// src/tokens/create/generators/color.ts
+import * as R3 from "ramda";
+
+// 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
+import chroma2 from "chroma-js";
+import * as R2 from "ramda";
+
+// src/colors/colorMetadata.ts
+import * as R from "ramda";
+var baseColors = {
+  blue: "#0A71C0",
+  green: "#068718",
+  orange: "#EA9B1B",
+  purple: "#663299",
+  red: "#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));
+
+// src/colors/theme.ts
+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 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;
+};
+
+// src/tokens/create/generators/color.ts
+var generateColor = (colorArray) => {
+  const obj = {};
+  const $type = "color";
+  for (const index in colorArray) {
+    obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
+  }
+  return obj;
+};
+var generateColorScheme = (themeName, colorScheme, colors) => {
+  const main = R3.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.main);
+  const support = R3.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.support);
+  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme));
+  return {
+    [themeName]: {
+      ...main,
+      ...support,
+      neutral
+    }
+  };
+};
+var generateColorGlobal = (colorScheme) => {
+  const blueScale = generateColorScale(baseColors.blue, colorScheme);
+  const greenScale = generateColorScale(baseColors.green, colorScheme);
+  const orangeScale = generateColorScale(baseColors.orange, colorScheme);
+  const purpleScale = generateColorScale(baseColors.purple, colorScheme);
+  const redScale = generateColorScale(baseColors.red, colorScheme);
+  return {
+    global: {
+      blue: generateColor(blueScale),
+      green: generateColor(greenScale),
+      orange: generateColor(orangeScale),
+      purple: generateColor(purpleScale),
+      red: generateColor(redScale)
+    }
+  };
+};
+export {
+  generateColorGlobal,
+  generateColorScheme
+};

package/dist/src/tokens/create/generators/semantic.d.ts

@@ -0,0 +1,296 @@
+import type { Colors, TokenSet } from '../../types.js';
+type SemanticModes = {
+    'main-color': Record<string, TokenSet>;
+    'support-color': Record<string, TokenSet>;
+};
+export declare const generateSemantic: (colors: Colors) => {
+    modes: SemanticModes;
+    color: {
+        color: {
+            success: {
+                "background-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "background-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-strong": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-default": {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            danger: {
+                "background-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "background-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-strong": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-default": {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            info: {
+                "background-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "background-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-strong": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-default": {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            warning: {
+                "background-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "background-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-tinted": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "surface-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "border-strong": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "text-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-default": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-hover": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-active": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-subtle": {
+                    $type: string;
+                    $value: string;
+                };
+                "base-contrast-default": {
+                    $type: string;
+                    $value: string;
+                };
+            };
+            focus: {
+                inner: {
+                    $type: string;
+                    $value: string;
+                };
+                outer: {
+                    $type: string;
+                    $value: string;
+                };
+            };
+        };
+        link: {
+            color: {
+                visited: {
+                    $type: string;
+                    $value: string;
+                };
+            };
+        };
+    };
+};
+export {};
+//# sourceMappingURL=semantic.d.ts.map

package/dist/src/tokens/create/generators/semantic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/semantic.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,aAAa,GAAG;IACnB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D9C,CAAC"}