@digdir/designsystemet 0.1.0-alpha.8 → 0.1.0-next.20

package/dist/bin/designsystemet.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+import { Argument, Command, program } from "@commander-js/extra-typings";
+import chalk from "chalk";
+import migrations from "../src/migrations/index.js";
+import { run } from "../src/tokens/build.js";
+import { makeInitCommand } from "../src/init/index.js";
+program.name("Designsystemet").description("CLI for working with Designsystemet");
+program.command("tokens").showHelpAfterError().description("run Designsystemet token builder").option("-t, --tokens [string]", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out [string]", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
+  const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
+  const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
+  const preview = opts.preview;
+  console.log(`Bulding tokens in ${chalk.green(tokens)}`);
+  return run({ tokens, out, preview });
+});
+program.command("migrate").showHelpAfterError().description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
+  const { glob, list } = opts;
+  if (list) {
+    Object.keys(migrations).forEach((key) => {
+      console.log(key);
+    });
+  } else if (migrationKey) {
+    const migration = migrations[migrationKey];
+    if (!migration) {
+      console.error("Migration not found!");
+      throw "Aborting";
+    }
+    console.log(`Applying migration ${chalk.blue(migrationKey)} with glob: ${chalk.green(glob)}`);
+    migration?.(glob).then(() => console.log(`Migration ${chalk.blue(migrationKey)} finished`)).catch((error) => console.log(error));
+  } else {
+    console.log("Migrate: please specify a migration name or --list");
+  }
+});
+program.addCommand(makeInitCommand(new Command("init")));
+await program.parseAsync(process.argv);

package/dist/src/colors/colorUtils.js

@@ -0,0 +1,230 @@
+import { Hsluv } from "hsluv";
+import chroma from "chroma-js";
+import { APCAcontrast, sRGBtoY } from "apca-w3";
+const hexToCssHsl = (hex, valuesOnly = false) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let cssString = "";
+  if (result) {
+    r = parseInt(result[1], 16);
+    g = parseInt(result[2], 16);
+    b = parseInt(result[3], 16);
+  }
+  r /= 255, g /= 255, b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h, s, l = (max + min) / 2;
+  if (max == min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+  }
+  h = Math.round(h ? h * 360 : 0);
+  s = Math.round(s * 100);
+  l = Math.round(l * 100);
+  cssString = h + "," + s + "%," + l + "%";
+  cssString = !valuesOnly ? "hsl(" + cssString + ")" : cssString;
+  return cssString;
+};
+const hexToHSL = (H) => {
+  let r = 0, g = 0, b = 0;
+  if (H.length == 4) {
+    r = parseInt("0x" + H[1] + H[1]);
+    g = parseInt("0x" + H[2] + H[2]);
+    b = parseInt("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = parseInt("0x" + H[1] + H[2]);
+    g = parseInt("0x" + H[3] + H[4]);
+    b = parseInt("0x" + H[5] + H[6]);
+  }
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let h = 0, s = 0, l = 0;
+  const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = (g - b) / delta % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+  h = Math.round(h * 60);
+  if (h < 0) h += 360;
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+};
+const hexToHsluv = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
+};
+const hslArrToCss = (HSL) => {
+  return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
+};
+const HSLToHex = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+  let r = 0, g = 0, b = 0;
+  const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  r = parseInt(Math.round((r + m) * 255).toString(16), 16);
+  g = parseInt(Math.round((g + m) * 255).toString(16), 16);
+  b = parseInt(Math.round((b + m) * 255).toString(16), 16);
+  if (r.toString().length == 1) r = parseInt("0" + r.toString(), 10);
+  if (g.toString().length == 1) g = parseInt("0" + g.toString(), 10);
+  if (b.toString().length == 1) b = parseInt("0" + b.toString(), 10);
+  return "#" + r + g + b;
+};
+const hexToRgb = (hex) => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+};
+const luminanceFromRgb = (r, g, b) => {
+  const a = [Number(r), Number(g), Number(b)].map(function(v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+const luminanceFromHex = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (rgb) {
+    const r = rgb.r.toString();
+    const g = rgb.g.toString();
+    const b = rgb.b.toString();
+    return luminanceFromRgb(r, g, b);
+  }
+  return 2;
+};
+const getRatioFromLum = (lum1, lum2) => {
+  if (lum1 !== null && lum2 !== null) {
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+  } else {
+    return -1;
+  }
+};
+const getHslLightessFromHex = (hex) => {
+  return chroma(hex).hsl()[2];
+};
+const getHslSaturationFromHex = (hex) => {
+  return chroma(hex).hsl()[1];
+};
+const getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return Number(conv.hsluv_l.toFixed(0));
+};
+const getContrastFromHex = (color1, color2) => {
+  const lum1 = luminanceFromHex(color1);
+  const lum2 = luminanceFromHex(color2);
+  if (lum1 !== null && lum2 !== null) {
+    return getRatioFromLum(lum1, lum2);
+  }
+  return -1;
+};
+const 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 = luminanceFromHex(lightMainColor);
+  const lum2 = luminanceFromHex(backgroundColor);
+  const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
+  return ratio;
+};
+const areColorsContrasting = (color1, color2, type = "aa") => {
+  const contrast = getContrastFromHex(color1, color2);
+  if (contrast !== null) {
+    if (type === "aaa") {
+      return contrast >= 7;
+    } else if (type === "aa") {
+      return contrast >= 4.5;
+    } else {
+      return contrast >= 3;
+    }
+  }
+  return false;
+};
+const getApcaContrastLc = (textColor, backgroundColor) => {
+  const textColorRgb = hexToRgb(textColor);
+  const backgroundColorRgb = hexToRgb(backgroundColor);
+  if (textColorRgb && backgroundColorRgb) {
+    return APCAcontrast(
+      sRGBtoY([textColorRgb.r, textColorRgb.g, textColorRgb.b]),
+      sRGBtoY([backgroundColorRgb.r, backgroundColorRgb.g, backgroundColorRgb.b])
+    );
+  }
+  return 0;
+};
+const isHexColor = (hex) => {
+  return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
+};
+export {
+  HSLToHex,
+  areColorsContrasting,
+  getApcaContrastLc,
+  getContrastFromHex,
+  getContrastFromLightness,
+  getHslLightessFromHex,
+  getHslSaturationFromHex,
+  getLightnessFromHex,
+  getRatioFromLum,
+  hexToCssHsl,
+  hexToHSL,
+  hexToHsluv,
+  hexToRgb,
+  hslArrToCss,
+  isHexColor,
+  luminanceFromHex,
+  luminanceFromRgb
+};

package/dist/src/colors/index.js

@@ -0,0 +1,3 @@
+export * from "./colorUtils";
+export * from "./themeUtils";
+export * from "./types";

package/dist/src/colors/themeUtils.js

@@ -0,0 +1,244 @@
+import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
+import { Hsluv } from "hsluv";
+import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./colorUtils";
+const blueBaseColor = "#0A71C0";
+const greenBaseColor = "#078D19";
+const orangeBaseColor = "#CA5C21";
+const purpleBaseColor = "#663299";
+const redBaseColor = "#C01B1B";
+const yellowBaseColor = "#EABF28";
+const generateThemeColor = (color, mode, contrastMode = "aa") => {
+  const leoBackgroundColor = new BackgroundColor({
+    name: "backgroundColor",
+    colorKeys: ["#ffffff"],
+    ratios: [1]
+  });
+  let colorLightness = getLightnessFromHex(color);
+  if (mode === "dark" || mode === "contrast") {
+    color = getBaseColor(color);
+    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
+  }
+  const multiplier = colorLightness <= 30 ? -8 : 8;
+  const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
+  const baseHoverContrast = getContrastFromLightness(
+    colorLightness - multiplier,
+    color,
+    leoBackgroundColor.colorKeys[0]
+  );
+  const baseActiveContrast = getContrastFromLightness(
+    colorLightness - multiplier * 2,
+    color,
+    leoBackgroundColor.colorKeys[0]
+  );
+  const textSubLightLightness = contrastMode === "aa" ? 42 : 30;
+  const textDefLightLightness = contrastMode === "aa" ? 18 : 12;
+  const textSubDarkLightness = contrastMode === "aa" ? 67 : 80;
+  const textDefDarkLightness = contrastMode === "aa" ? 90 : 94;
+  let lightnessScale = [];
+  if (mode === "light") {
+    lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
+  } else if (mode === "dark") {
+    lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
+  } else {
+    lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
+  }
+  const getColorContrasts = (color2, lightnessScale2, backgroundColor) => {
+    return lightnessScale2.map((lightness) => getContrastFromLightness(lightness, color2, backgroundColor));
+  };
+  return new Color({
+    name: "color",
+    colorKeys: [color],
+    ratios: [
+      ...getColorContrasts(color, lightnessScale.slice(0, 8), leoBackgroundColor.colorKeys[0]),
+      baseDefaultContrast,
+      baseHoverContrast,
+      baseActiveContrast,
+      ...getColorContrasts(color, lightnessScale.slice(8), leoBackgroundColor.colorKeys[0])
+    ]
+  });
+};
+const generateScaleForColor = (color, mode, contrastMode = "aa") => {
+  const themeColor = generateThemeColor(color, mode, contrastMode);
+  const leoBackgroundColor = new BackgroundColor({
+    name: "backgroundColor",
+    colorKeys: ["#ffffff"],
+    ratios: [1]
+  });
+  const theme = new Theme({
+    colors: [themeColor],
+    backgroundColor: leoBackgroundColor,
+    lightness: 100
+  });
+  const outputArray = [];
+  for (let i = 0; i < theme.contrastColorValues.length; i++) {
+    outputArray.push({
+      hex: theme.contrastColorValues[i],
+      number: i + 1,
+      name: getColorNameFromNumber(i + 1)
+    });
+  }
+  outputArray.push({
+    hex: calculateContrastOneColor(theme.contrastColorValues[8]),
+    number: 14,
+    name: getColorNameFromNumber(14)
+  });
+  outputArray.push({
+    hex: calculateContrastTwoColor(theme.contrastColorValues[8]),
+    number: 15,
+    name: getColorNameFromNumber(15)
+  });
+  if (mode === "light") {
+    outputArray[8].hex = color;
+  }
+  return outputArray;
+};
+const generateThemeForColor = (color, contrastMode = "aa") => {
+  const lightScale = generateScaleForColor(color, "light", contrastMode);
+  const darkScale = generateScaleForColor(color, "dark", contrastMode);
+  const contrastScale = generateScaleForColor(color, "contrast", contrastMode);
+  return {
+    light: lightScale,
+    dark: darkScale,
+    contrast: contrastScale
+  };
+};
+const generateGlobalColors = ({ contrastMode = "aa" }) => {
+  const blueTheme = generateThemeForColor(blueBaseColor, contrastMode);
+  const greenTheme = generateThemeForColor(greenBaseColor, contrastMode);
+  const orangeTheme = generateThemeForColor(orangeBaseColor, contrastMode);
+  const purpleTheme = generateThemeForColor(purpleBaseColor, contrastMode);
+  const redTheme = generateThemeForColor(redBaseColor, contrastMode);
+  const yellowTheme = generateThemeForColor(yellowBaseColor, contrastMode);
+  return {
+    blue: blueTheme,
+    green: greenTheme,
+    orange: orangeTheme,
+    purple: purpleTheme,
+    red: redTheme,
+    yellow: yellowTheme
+  };
+};
+const generateColorTheme = ({ colors, contrastMode = "aa" }) => {
+  const accentTheme = generateThemeForColor(colors.accent, contrastMode);
+  const neutralTheme = generateThemeForColor(colors.neutral, contrastMode);
+  const brand1Theme = generateThemeForColor(colors.brand1, contrastMode);
+  const brand2Theme = generateThemeForColor(colors.brand2, contrastMode);
+  const brand3Theme = generateThemeForColor(colors.brand3, contrastMode);
+  return {
+    accent: accentTheme,
+    neutral: neutralTheme,
+    brand1: brand1Theme,
+    brand2: brand2Theme,
+    brand3: brand3Theme
+  };
+};
+const calculateContrastOneColor = (baseColor) => {
+  const contrastWhite = getContrastFromHex(baseColor, "#ffffff");
+  const contrastBlack = getContrastFromHex(baseColor, "#000000");
+  const lightness = contrastWhite >= contrastBlack ? 100 : 0;
+  return lightness === 0 ? "#000000" : "#ffffff";
+};
+const calculateContrastTwoColor = (color) => {
+  const contrastWhite = getContrastFromHex(color, "#ffffff");
+  const contrastBlack = getContrastFromHex(color, "#000000");
+  const lightness = getLightnessFromHex(color);
+  const doubleALightnessModifier = lightness <= 40 ? 60 : lightness >= 60 ? 60 : 50;
+  let targetLightness = 0;
+  const contrastDirection = contrastWhite >= contrastBlack ? "lighten" : "darken";
+  targetLightness = contrastDirection === "lighten" ? lightness + doubleALightnessModifier : lightness - doubleALightnessModifier;
+  return createColorWithLightness(color, targetLightness);
+};
+const 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;
+  } else if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
+    return true;
+  }
+  return false;
+};
+const createColorWithLightness = (color, lightness) => {
+  const leoBackgroundColor = new BackgroundColor({
+    name: "backgroundColor",
+    colorKeys: ["#ffffff"],
+    ratios: [1]
+  });
+  const colors = new Color({
+    name: "color",
+    colorKeys: [color],
+    ratios: [getContrastFromLightness(lightness, color, "#ffffff")]
+  });
+  const theme = new Theme({
+    colors: [colors],
+    backgroundColor: leoBackgroundColor,
+    lightness: 100
+  });
+  return theme.contrastColorValues[0];
+};
+const getColorNumberFromName = (name) => {
+  const colorMap = {
+    "Background Default": 1,
+    "Background Subtle": 2,
+    "Surface Default": 3,
+    "Surface Hover": 4,
+    "Surface Active": 5,
+    "Border Subtle": 6,
+    "Border Default": 7,
+    "Border Strong": 8,
+    "Base Default": 9,
+    "Base Hover": 10,
+    "Base Active": 11,
+    "Text Subtle": 12,
+    "Text Default": 13,
+    "Contrast Default": 14,
+    "Contrast Subtle": 15
+  };
+  return colorMap[name];
+};
+const getColorNameFromNumber = (number) => {
+  const colorMap = {
+    1: "Background Default",
+    2: "Background Subtle",
+    3: "Surface Default",
+    4: "Surface Hover",
+    5: "Surface Active",
+    6: "Border Subtle",
+    7: "Border Default",
+    8: "Border Strong",
+    9: "Base Default",
+    10: "Base Hover",
+    11: "Base Active",
+    12: "Text Subtle",
+    13: "Text Default",
+    14: "Contrast Default",
+    15: "Contrast Subtle"
+  };
+  return colorMap[number];
+};
+const getBaseColor = (color) => {
+  const conv = new Hsluv();
+  conv.hex = color;
+  conv.hexToHsluv();
+  conv.hsluvToHex();
+  return conv.hex;
+};
+const getCssVariable = (colorType, colorNumber) => {
+  return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
+};
+export {
+  calculateContrastOneColor,
+  calculateContrastTwoColor,
+  canTextBeUsedOnColors,
+  createColorWithLightness,
+  generateColorTheme,
+  generateGlobalColors,
+  generateScaleForColor,
+  generateThemeForColor,
+  getBaseColor,
+  getColorNameFromNumber,
+  getColorNumberFromName,
+  getCssVariable
+};