@digdir/designsystemet 1.0.0-next.41 → 1.0.0-next.42

package/dist/bin/designsystemet.js

@@ -9,19 +9,23 @@ import { writeTokens } from "../src/tokens/write.js";
 program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
-  const DEFAULT_TOKENSDIR = "./design-tokens";
-  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./build").option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
-    const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENSDIR;
-    const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
-    const preview = opts.preview;
-    const verbose = opts.verbose;
+  const DEFAULT_TOKENS_DIR = "./design-tokens";
+  const DEFAULT_BUILD_DIR = "./design-tokens-build";
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_DIR).option("-o, --out-dir <string>", `Output directory for built ${chalk.blue("design-tokens")}`, DEFAULT_BUILD_DIR).option("--dry [boolean]", `Dry run for built ${chalk.blue("design-tokens")}`, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
+    const { preview, verbose } = opts;
+    const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_DIR;
+    const outDir = typeof opts.outDir === "string" ? opts.outDir : "./dist/tokens";
+    const dry = Boolean(opts.dry);
     console.log(`Building tokens in ${chalk.green(tokens)}`);
-    return buildTokens({ tokens, out, preview, verbose });
+    if (dry) {
+      console.log(`Performing dry run, no files will be written`);
+    }
+    return buildTokens({ tokens, outDir, preview, verbose, dry });
   });
-  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues).requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues).requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex).option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
-    const { theme, fontFamily } = opts;
+  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues).requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues).requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex).option("-o, --out-dir <string>", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_DIR).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, false).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
+    const { theme, fontFamily, outDir } = opts;
+    const dry = Boolean(opts.dry);
     console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts, null, 2))}`);
-    const write = typeof opts.write === "boolean" ? DEFAULT_TOKENSDIR : opts.write;
     const props = {
       themeName: theme,
       colors: {
@@ -33,10 +37,11 @@ function makeTokenCommands() {
         fontFamily
       }
     };
-    const tokens = createTokens(props);
-    if (write) {
-      await writeTokens({ writeDir: write, tokens, themeName: theme, colors: props.colors });
+    if (dry) {
+      console.log(`Performing dry run, no files will be written`);
     }
+    const tokens = createTokens(props);
+    await writeTokens({ outDir, tokens, themeName: theme, colors: props.colors, dry });
     return Promise.resolve();
   });
   return tokenCmd;

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

@@ -0,0 +1,54 @@
+export declare const luminance: {
+    light: {
+        backgroundDefault: number;
+        backgroundSubtle: number;
+        surfaceDefault: number;
+        surfaceHover: number;
+        surfaceActive: number;
+        borderSubtle: number;
+        borderDefault: number;
+        borderStrong: number;
+        baseDefault: number;
+        baseHover: number;
+        baseActive: number;
+        textSubtle: number;
+        textDefault: number;
+        baseContrastDefault: number;
+        baseContrastSubtle: number;
+    };
+    dark: {
+        backgroundDefault: number;
+        backgroundSubtle: number;
+        surfaceDefault: number;
+        surfaceHover: number;
+        surfaceActive: number;
+        borderSubtle: number;
+        borderDefault: number;
+        borderStrong: number;
+        baseDefault: number;
+        baseHover: number;
+        baseActive: number;
+        textSubtle: number;
+        textDefault: number;
+        baseContrastDefault: number;
+        baseContrastSubtle: number;
+    };
+    contrast: {
+        backgroundDefault: number;
+        backgroundSubtle: number;
+        surfaceDefault: number;
+        surfaceHover: number;
+        surfaceActive: number;
+        borderSubtle: number;
+        borderDefault: number;
+        borderStrong: number;
+        baseDefault: number;
+        baseHover: number;
+        baseActive: number;
+        textSubtle: number;
+        textDefault: number;
+        baseContrastDefault: number;
+        baseContrastSubtle: number;
+    };
+};
+//# sourceMappingURL=luminance.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"luminance.d.ts","sourceRoot":"","sources":["../../../src/colors/luminance.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDrB,CAAC"}

package/dist/src/colors/luminance.js

@@ -0,0 +1,56 @@
+const luminance = {
+  light: {
+    backgroundDefault: 1,
+    backgroundSubtle: 0.9,
+    surfaceDefault: 0.76,
+    surfaceHover: 0.64,
+    surfaceActive: 0.54,
+    borderSubtle: 0.5,
+    borderDefault: 0.21,
+    borderStrong: 0.12,
+    baseDefault: 1,
+    baseHover: 1,
+    baseActive: 1,
+    textSubtle: 0.12,
+    textDefault: 0.0245,
+    baseContrastDefault: 1,
+    baseContrastSubtle: 1
+  },
+  dark: {
+    backgroundDefault: 0.012,
+    backgroundSubtle: 0.018,
+    surfaceDefault: 0.029,
+    surfaceHover: 0.046,
+    surfaceActive: 0.069,
+    borderSubtle: 0.082,
+    borderDefault: 0.2,
+    borderStrong: 0.36,
+    baseDefault: 1,
+    baseHover: 1,
+    baseActive: 1,
+    textSubtle: 0.36,
+    textDefault: 0.78,
+    baseContrastDefault: 1,
+    baseContrastSubtle: 1
+  },
+  contrast: {
+    backgroundDefault: 1e-3,
+    backgroundSubtle: 65e-4,
+    surfaceDefault: 0.015,
+    surfaceHover: 0.028,
+    surfaceActive: 0.044,
+    borderSubtle: 0.26,
+    borderDefault: 0.4,
+    borderStrong: 0.6,
+    baseDefault: 1,
+    baseHover: 1,
+    baseActive: 1,
+    textSubtle: 0.57,
+    textDefault: 0.86,
+    baseContrastDefault: 1,
+    baseContrastSubtle: 1
+  }
+};
+export {
+  luminance
+};

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

@@ -1,90 +1,36 @@
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import type { Colors } from '../tokens/types.js';
-import type { ColorInfo, ColorMode, ColorNumber, ContrastMode, GlobalColors, ThemeInfo } from './types.js';
+import type { CssColor } from './types.js';
+import type { ColorInfo, ColorNumber, ColorScheme, GlobalColors, ThemeInfo } from './types.js';
 export declare const baseColors: Record<GlobalColors, CssColor>;
-export type ColorError = 'none' | 'decorative' | 'interaction';
-type GlobalGenType = {
-    themeMode?: ColorMode | 'all';
-    contrastMode?: ContrastMode;
-};
-type ThemeGenType = {
-    colors: Colors;
-    contrastMode?: ContrastMode;
-};
 /**
- *
- * Generates a color scale based on a base color and a mode.
+ * 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 generateScaleForColor: (color: CssColor, colorScheme: ColorMode, contrastMode?: "aa" | "aaa") => ColorInfo[];
-/**
- *
- * Generates a color theme based on a base color. Light, Dark and Contrast scales are includes.
- *
- * @param color The base color that is used to generate the color theme
- */
-export declare const generateThemeForColor: (color: CssColor, contrastMode?: "aa" | "aaa") => ThemeInfo;
-export declare const generateGlobalColors: ({ contrastMode }: GlobalGenType) => Record<GlobalColors, ThemeInfo>;
-type GeneratedColorTheme = {
-    main: Record<string, ThemeInfo>;
-    support: Record<string, ThemeInfo>;
-    neutral: ThemeInfo;
-};
+export declare const generateColorScale: (color: CssColor, colorScheme: ColorScheme) => ColorInfo[];
 /**
- * This function generates a complete theme for a set of colors.
+ * Generates color schemes based on a base color. Light, Dark and Contrast scales are included.
  *
- * @param colors Which colors to generate the theme for
- * @param contrastMode The contrast mode to use
- * @returns
+ * @param color The base color that is used to generate the color schemes
  */
-export declare const generateColorTheme: ({ colors, contrastMode }: ThemeGenType) => GeneratedColorTheme;
+export declare const generateColorSchemes: (color: CssColor) => ThemeInfo;
 /**
- *
- * This function calculates a color that can be used as a strong contrast color to a base color.
+ * Creates the Base Contrast Default color
  *
  * @param baseColor The base color
  */
-export declare const calculateContrastOneColor: (baseColor: CssColor) => "#000000" | "#ffffff";
+export declare const getContrastDefault: (color: CssColor) => CssColor;
 /**
- *
- * This function calculates a color that can be used as a subtle contrast color to a base color.
+ * Creates the Base Contrast Subtle color
  *
  * @param color The base color
  */
-export declare const calculateContrastTwoColor: (color: CssColor) => CssColor;
-/**
- *
- * 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;
+export declare const getContrastSubtle: (color: CssColor) => CssColor;
 /**
+ * Returns the css variable for a color.
  *
- * This function creates a color with a specific lightness value.
- *
- * @param color The base color
- * @param lightness The lightness value from 0 to 100
- */
-export declare const createColorWithLightness: (color: CssColor, lightness: number) => CssColor;
-/**
- *
- * This function returns the color number based on the color name.
- *
- * @param name The name of the color
- */
-export declare const getColorNumberFromName: (name: string) => ColorNumber;
-/**
- *
- * This function returns the color name based on the color number.
- *
- * @param number The number of the color
+ * @param colorType The type of color
+ * @param colorNumber The number of the color
  */
-export declare const getColorNameFromNumber: (number: ColorNumber) => string;
-export declare const getBaseColor: (color: CssColor) => CssColor;
 export declare const getCssVariable: (colorType: string, colorNumber: ColorNumber) => string;
-export {};
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG3G,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AA2EF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,UACzB,QAAQ,eACF,SAAS,iBACR,IAAI,GAAG,KAAK,KACzB,SAAS,EAuCX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,iBAAgB,IAAI,GAAG,KAAK,KAAU,SAU1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAA6B,aAAa,KAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAgB3G,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AACF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,6BAAqC,YAAY,KAAG,mBAUlF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,cAAe,QAAQ,0BAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,UAAW,QAAQ,aAaxD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,qBAAsB,QAAQ,mBAAmB,QAAQ,YAe1F,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,QAAQ,aAAa,MAAM,aAkB1E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,KAAG,WAmBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,MAmB5D,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,QAAQ,KAQvB,QACpB,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG/F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,SAAS,EA8BvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AA6BH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,KAAG,QAC2C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,QAAQ,KAAG,QAQnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -1,7 +1,6 @@
-import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
-import { Hsluv } from "hsluv";
-import * as R from "ramda";
-import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./utils.js";
+import chroma from "chroma-js";
+import { luminance } from "./luminance.js";
+import { getColorNameFromNumber, getLightnessFromHex, getLuminanceFromLightness } from "./utils.js";
 const baseColors = {
   blue: "#0A71C0",
   green: "#068718",
@@ -10,238 +9,65 @@ const baseColors = {
   red: "#C01B1B",
   yellow: "#D4B12F"
 };
-const generateThemeColor = (color, colorScheme, contrastMode = "aa") => {
-  const leoBackgroundColor = new BackgroundColor({
-    name: "backgroundColor",
-    colorKeys: ["#ffffff"],
-    ratios: [1]
-  });
-  let colorLightness = getLightnessFromHex(color);
-  if (colorScheme === "dark" || colorScheme === "contrast") {
-    color = getBaseColor(color);
-    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
-  }
-  let modifier = 8;
-  if (colorLightness <= 30) {
-    modifier = -modifier;
-  }
-  if (colorLightness >= 49 && colorLightness <= 65) {
-    modifier = -modifier;
-  }
-  const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
-  const baseHoverContrast = getContrastFromLightness(colorLightness - modifier, color, leoBackgroundColor.colorKeys[0]);
-  const baseActiveContrast = getContrastFromLightness(
-    colorLightness - modifier * 2,
-    color,
-    leoBackgroundColor.colorKeys[0]
-  );
-  const textSubLightLightness = contrastMode === "aa" ? 41 : 30;
-  const textDefLightLightness = contrastMode === "aa" ? 18 : 12;
-  const textSubDarkLightness = contrastMode === "aa" ? 66 : 80;
-  const textDefDarkLightness = contrastMode === "aa" ? 90 : 94;
-  let lightnessScale = [];
-  if (colorScheme === "light") {
-    lightnessScale = [100, 96, 90, 84, 78, 76, 53, 41, textSubLightLightness, textDefLightLightness];
-  } else if (colorScheme === "dark") {
-    lightnessScale = [10, 14, 20, 26, 32, 35, 52, 66, 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, colorScheme, contrastMode = "aa") => {
-  const themeColor = generateThemeColor(color, colorScheme, 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 (colorScheme === "light") {
-    outputArray[8].hex = color;
+const generateColorScale = (color, colorScheme) => {
+  const baseColors2 = getBaseColors(color, colorScheme);
+  const luminanceValues = luminance[colorScheme];
+  const outputArray = Object.entries(luminanceValues).map(([key, value], index) => ({
+    name: key,
+    hex: chroma(color).luminance(value).hex(),
+    number: index + 1
+  }));
+  const specialColors = [
+    { hex: baseColors2.baseDefault, number: 9 },
+    { hex: baseColors2.baseHover, number: 10 },
+    { hex: baseColors2.baseActive, number: 11 },
+    { hex: getContrastDefault(baseColors2.baseDefault), number: 14 },
+    { hex: getContrastSubtle(baseColors2.baseDefault), number: 15 }
+  ];
+  for (const { hex, number } of specialColors) {
+    outputArray[number - 1] = {
+      hex,
+      number,
+      name: getColorNameFromNumber(number)
+    };
   }
   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(baseColors.blue, contrastMode);
-  const greenTheme = generateThemeForColor(baseColors.green, contrastMode);
-  const orangeTheme = generateThemeForColor(baseColors.orange, contrastMode);
-  const purpleTheme = generateThemeForColor(baseColors.purple, contrastMode);
-  const redTheme = generateThemeForColor(baseColors.red, contrastMode);
-  const yellowTheme = generateThemeForColor(baseColors.yellow, contrastMode);
-  return {
-    blue: blueTheme,
-    green: greenTheme,
-    orange: orangeTheme,
-    purple: purpleTheme,
-    red: redTheme,
-    yellow: yellowTheme
-  };
-};
-const generateColorTheme = ({ colors, contrastMode = "aa" }) => {
-  const main = R.map((color) => generateThemeForColor(color, contrastMode), colors.main);
-  const support = R.map((color) => generateThemeForColor(color, contrastMode), colors.support);
-  const neutral = generateThemeForColor(colors.neutral, contrastMode);
+const generateColorSchemes = (color) => ({
+  light: generateColorScale(color, "light"),
+  dark: generateColorScale(color, "dark"),
+  contrast: generateColorScale(color, "contrast")
+});
+const getBaseColors = (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 {
-    main,
-    support,
-    neutral
+    baseDefault: chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
+    baseHover: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
+    baseActive: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
   };
 };
-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 getContrastDefault = (color) => chroma.contrast(color, "#ffffff") >= chroma.contrast(color, "#000000") ? "#ffffff" : "#000000";
+const getContrastSubtle = (color) => {
+  const contrastWhite = chroma.contrast(color, "#ffffff");
+  const contrastBlack = chroma.contrast(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;
-  }
-  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 modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
+  const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
+  return chroma(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
 };
 const getCssVariable = (colorType, colorNumber) => {
   return `--ds-color-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
 };
 export {
   baseColors,
-  calculateContrastOneColor,
-  calculateContrastTwoColor,
-  canTextBeUsedOnColors,
-  createColorWithLightness,
-  generateColorTheme,
-  generateGlobalColors,
-  generateScaleForColor,
-  generateThemeForColor,
-  getBaseColor,
-  getColorNameFromNumber,
-  getColorNumberFromName,
+  generateColorScale,
+  generateColorSchemes,
+  getContrastDefault,
+  getContrastSubtle,
   getCssVariable
 };

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

@@ -1,8 +1,8 @@
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
-export type ColorMode = 'light' | 'dark' | 'contrast';
+export type ColorScheme = 'light' | 'dark' | 'contrast';
 export type ContrastMode = 'aa' | 'aaa';
 export type ColorNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
 export type GlobalColors = 'red' | 'blue' | 'green' | 'orange' | 'purple' | 'yellow';
+export type ColorError = 'none' | 'decorative' | 'interaction';
 export type ColorInfo = {
     hex: CssColor;
     number: ColorNumber;
@@ -13,4 +13,25 @@ export type ThemeInfo = {
     dark: ColorInfo[];
     contrast: ColorInfo[];
 };
+/**
+ * A valid CSS color.
+ */
+export type CssColor = RgbHexColor | RgbColor | HslColor | HsvColor | HsluvColor | LabColor | LchColor | OkLabColor | OkLchColor | Cam02Color | Cam02pColor;
+/**
+ * Different color formats.
+ */
+type RgbHexColor = `#${string}`;
+type RgbColor = `rgb(${number} ${number} ${number})`;
+type HslColor = `hsl(${Degrees} ${Percent} ${Percent})`;
+type HsvColor = `hsv(${Degrees} ${Percent} ${Percent})`;
+type HsluvColor = `hsluv(${number} ${number} ${number})`;
+type LabColor = `lab(${Percent} ${number} ${number})`;
+type LchColor = `lch(${Percent} ${number} ${Degrees})`;
+type OkLabColor = `oklab(${Percent} ${number} ${number})`;
+type OkLchColor = `oklch(${Percent} ${number} ${Degrees})`;
+type Cam02Color = `jab(${Percent} ${number} ${number})`;
+type Cam02pColor = `jch(${Percent} ${number} ${Degrees})`;
+type Percent = `${number}%`;
+type Degrees = `${number}deg`;
+export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC1F,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,QAAQ,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC1F,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,QAAQ,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAChB,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,UAAU,GACV,UAAU,GACV,WAAW,CAAC;AAEhB;;GAEG;AACH,KAAK,WAAW,GAAG,IAAI,MAAM,EAAE,CAAC;AAChC,KAAK,QAAQ,GAAG,OAAO,MAAM,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC;AACrD,KAAK,QAAQ,GAAG,OAAO,OAAO,IAAI,OAAO,IAAI,OAAO,GAAG,CAAC;AACxD,KAAK,QAAQ,GAAG,OAAO,OAAO,IAAI,OAAO,IAAI,OAAO,GAAG,CAAC;AACxD,KAAK,UAAU,GAAG,SAAS,MAAM,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC;AACzD,KAAK,QAAQ,GAAG,OAAO,OAAO,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC;AACtD,KAAK,QAAQ,GAAG,OAAO,OAAO,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC;AACvD,KAAK,UAAU,GAAG,SAAS,OAAO,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC;AAC1D,KAAK,UAAU,GAAG,SAAS,OAAO,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC;AAC3D,KAAK,UAAU,GAAG,OAAO,OAAO,IAAI,MAAM,IAAI,MAAM,GAAG,CAAC;AACxD,KAAK,WAAW,GAAG,OAAO,OAAO,IAAI,MAAM,IAAI,OAAO,GAAG,CAAC;AAE1D,KAAK,OAAO,GAAG,GAAG,MAAM,GAAG,CAAC;AAC5B,KAAK,OAAO,GAAG,GAAG,MAAM,KAAK,CAAC"}