feat(projects): 1.0 beta

packages/color-palette/src/color.ts

@@ -0,0 +1,29 @@
+import { colord, extend } from 'colord';
+import type { HslColor } from 'colord';
+import labPlugin from 'colord/plugins/lab';
+
+extend([labPlugin]);
+
+export function isValidColor(color: string) {
+  return colord(color).isValid();
+}
+
+export function getHex(color: string) {
+  return colord(color).toHex();
+}
+
+export function getRgb(color: string) {
+  return colord(color).toRgb();
+}
+
+export function getHsl(color: string) {
+  return colord(color).toHsl();
+}
+
+export function getDeltaE(color1: string, color2: string) {
+  return colord(color1).delta(color2);
+}
+
+export function transformHslToHex(color: HslColor) {
+  return colord(color).toHex();
+}

packages/color-palette/src/index.ts

@@ -0,0 +1,56 @@
+import { getColorPaletteFamily } from './palette';
+import { getColorName } from './name';
+import type { ColorPalette, ColorPaletteNumber, ColorPaletteItem, ColorPaletteFamily } from './type';
+import defaultPalettes from './json/palette.json';
+
+/**
+ * get color palette by provided color and color name
+ * @param color the provided color
+ * @param colorName color name
+ */
+export function getColorPalette(color: string, colorName: string) {
+  const colorPaletteFamily = getColorPaletteFamily(color, colorName);
+
+  const colorMap = new Map<ColorPaletteNumber, ColorPaletteItem>();
+
+  colorPaletteFamily.palettes.forEach(palette => {
+    colorMap.set(palette.number, palette);
+  });
+
+  const mainColor = colorMap.get(500) as ColorPaletteItem;
+  const matchColor = colorPaletteFamily.palettes.find(palette => palette.hexcode === color) as ColorPaletteItem;
+
+  const colorPalette: ColorPalette = {
+    ...colorPaletteFamily,
+    colorMap,
+    main: mainColor,
+    match: matchColor
+  };
+
+  return colorPalette;
+}
+
+/**
+ * get color by color palette number
+ * @param color color
+ * @param num color palette number
+ * @return color hexcode
+ */
+export function getColorByColorPaletteNumber(color: string, num: ColorPaletteNumber) {
+  const colorPalette = getColorPalette(color, color);
+
+  const colorItem = colorPalette.colorMap.get(num) as ColorPaletteItem;
+
+  return colorItem.hexcode;
+}
+
+export default getColorPalette;
+
+/**
+ * the builtin color palettes
+ */
+const colorPalettes = defaultPalettes as ColorPaletteFamily[];
+
+export { getColorName, colorPalettes };
+
+export type { ColorPalette, ColorPaletteNumber, ColorPaletteItem, ColorPaletteFamily };

packages/color-palette/src/json/palette.json

@@ -0,0 +1,274 @@
+[
+  {
+    "key": "red",
+    "palettes": [
+      { "hexcode": "#fef2f2", "number": 50, "name": "Bridesmaid" },
+      { "hexcode": "#fee2e2", "number": 100, "name": "Pippin" },
+      { "hexcode": "#fecaca", "number": 200, "name": "Your Pink" },
+      { "hexcode": "#fca5a5", "number": 300, "name": "Cornflower Lilac" },
+      { "hexcode": "#f87171", "number": 400, "name": "Bittersweet" },
+      { "hexcode": "#ef4444", "number": 500, "name": "Cinnabar" },
+      { "hexcode": "#dc2626", "number": 600, "name": "Persian Red" },
+      { "hexcode": "#b91c1c", "number": 700, "name": "Thunderbird" },
+      { "hexcode": "#991b1b", "number": 800, "name": "Old Brick" },
+      { "hexcode": "#7f1d1d", "number": 900, "name": "Falu Red" },
+      { "hexcode": "#450a0a", "number": 950, "name": "Mahogany" }
+    ]
+  },
+  {
+    "key": "orange",
+    "palettes": [
+      { "hexcode": "#fff7ed", "number": 50, "name": "Serenade" },
+      { "hexcode": "#ffedd5", "number": 100, "name": "Derby" },
+      { "hexcode": "#fed7aa", "number": 200, "name": "Caramel" },
+      { "hexcode": "#fdba74", "number": 300, "name": "Macaroni and Cheese" },
+      { "hexcode": "#fb923c", "number": 400, "name": "Neon Carrot" },
+      { "hexcode": "#f97316", "number": 500, "name": "Ecstasy" },
+      { "hexcode": "#ea580c", "number": 600, "name": "Trinidad" },
+      { "hexcode": "#c2410c", "number": 700, "name": "Tia Maria" },
+      { "hexcode": "#9a3412", "number": 800, "name": "Tabasco" },
+      { "hexcode": "#7c2d12", "number": 900, "name": "Pueblo" },
+      { "hexcode": "#431407", "number": 950, "name": "Rebel" }
+    ]
+  },
+  {
+    "key": "amber",
+    "palettes": [
+      { "hexcode": "#fffbeb", "number": 50, "name": "Island Spice" },
+      { "hexcode": "#fef3c7", "number": 100, "name": "Beeswax" },
+      { "hexcode": "#fde68a", "number": 200, "name": "Sweet Corn" },
+      { "hexcode": "#fcd34d", "number": 300, "name": "Mustard" },
+      { "hexcode": "#fbbf24", "number": 400, "name": "Lightning Yellow" },
+      { "hexcode": "#f59e0b", "number": 500, "name": "California" },
+      { "hexcode": "#d97706", "number": 600, "name": "Christine" },
+      { "hexcode": "#b45309", "number": 700, "name": "Vesuvius" },
+      { "hexcode": "#92400e", "number": 800, "name": "Korma" },
+      { "hexcode": "#78350f", "number": 900, "name": "Copper Canyon" },
+      { "hexcode": "#451a03", "number": 950, "name": "Brown Pod" }
+    ]
+  },
+  {
+    "key": "yellow",
+    "palettes": [
+      { "hexcode": "#fefce8", "number": 50, "name": "Orange White" },
+      { "hexcode": "#fef9c3", "number": 100, "name": "Lemon Chiffon" },
+      { "hexcode": "#fef08a", "number": 200, "name": "Sweet Corn" },
+      { "hexcode": "#fde047", "number": 300, "name": "Bright Sun" },
+      { "hexcode": "#facc15", "number": 400, "name": "Candlelight" },
+      { "hexcode": "#eab308", "number": 500, "name": "Corn" },
+      { "hexcode": "#ca8a04", "number": 600, "name": "Pirate Gold" },
+      { "hexcode": "#a16207", "number": 700, "name": "Mai Tai" },
+      { "hexcode": "#854d0e", "number": 800, "name": "Korma" },
+      { "hexcode": "#713f12", "number": 900, "name": "Sepia" },
+      { "hexcode": "#422006", "number": 950, "name": "Dark Ebony" }
+    ]
+  },
+  {
+    "key": "lime",
+    "palettes": [
+      { "hexcode": "#f7fee7", "number": 50, "name": "Spring Sun" },
+      { "hexcode": "#ecfccb", "number": 100, "name": "Chiffon" },
+      { "hexcode": "#d9f99d", "number": 200, "name": "Gossip" },
+      { "hexcode": "#bef264", "number": 300, "name": "Sulu" },
+      { "hexcode": "#a3e635", "number": 400, "name": "Conifer" },
+      { "hexcode": "#84cc16", "number": 500, "name": "Lima" },
+      { "hexcode": "#65a30d", "number": 600, "name": "Christi" },
+      { "hexcode": "#4d7c0f", "number": 700, "name": "Green Leaf" },
+      { "hexcode": "#3f6212", "number": 800, "name": "Dell" },
+      { "hexcode": "#365314", "number": 900, "name": "Clover" },
+      { "hexcode": "#1a2e05", "number": 950, "name": "Deep Forest Green" }
+    ]
+  },
+  {
+    "key": "green",
+    "palettes": [
+      { "hexcode": "#f0fdf4", "number": 50, "name": "Ottoman" },
+      { "hexcode": "#dcfce7", "number": 100, "name": "Blue Romance" },
+      { "hexcode": "#bbf7d0", "number": 200, "name": "Magic Mint" },
+      { "hexcode": "#86efac", "number": 300, "name": "Algae Green" },
+      { "hexcode": "#4ade80", "number": 400, "name": "Emerald" },
+      { "hexcode": "#22c55e", "number": 500, "name": "Malachite" },
+      { "hexcode": "#16a34a", "number": 600, "name": "Salem" },
+      { "hexcode": "#15803d", "number": 700, "name": "Jewel" },
+      { "hexcode": "#166534", "number": 800, "name": "Jewel" },
+      { "hexcode": "#14532d", "number": 900, "name": "Green Pea" },
+      { "hexcode": "#052e16", "number": 950, "name": "English Holly" }
+    ]
+  },
+  {
+    "key": "emerald",
+    "palettes": [
+      { "hexcode": "#ecfdf5", "number": 50, "name": "White Ice" },
+      { "hexcode": "#d1fae5", "number": 100, "name": "Granny Apple" },
+      { "hexcode": "#a7f3d0", "number": 200, "name": "Magic Mint" },
+      { "hexcode": "#6ee7b7", "number": 300, "name": "Bermuda" },
+      { "hexcode": "#34d399", "number": 400, "name": "Shamrock" },
+      { "hexcode": "#10b981", "number": 500, "name": "Mountain Meadow" },
+      { "hexcode": "#059669", "number": 600, "name": "Green Haze" },
+      { "hexcode": "#047857", "number": 700, "name": "Watercourse" },
+      { "hexcode": "#065f46", "number": 800, "name": "Watercourse" },
+      { "hexcode": "#064e3b", "number": 900, "name": "Evening Sea" },
+      { "hexcode": "#022c22", "number": 950, "name": "Burnham" }
+    ]
+  },
+  {
+    "key": "teal",
+    "palettes": [
+      { "hexcode": "#f0fdfa", "number": 50, "name": "White Ice" },
+      { "hexcode": "#ccfbf1", "number": 100, "name": "Scandal" },
+      { "hexcode": "#99f6e4", "number": 200, "name": "Ice Cold" },
+      { "hexcode": "#5eead4", "number": 300, "name": "Turquoise Blue" },
+      { "hexcode": "#2dd4bf", "number": 400, "name": "Turquoise" },
+      { "hexcode": "#14b8a6", "number": 500, "name": "Java" },
+      { "hexcode": "#0d9488", "number": 600, "name": "Blue Chill" },
+      { "hexcode": "#0f766e", "number": 700, "name": "Genoa" },
+      { "hexcode": "#115e59", "number": 800, "name": "Eden" },
+      { "hexcode": "#134e4a", "number": 900, "name": "Eden" },
+      { "hexcode": "#042f2e", "number": 950, "name": "Tiber" }
+    ]
+  },
+  {
+    "key": "cyan",
+    "palettes": [
+      { "hexcode": "#ecfeff", "number": 50, "name": "Bubbles" },
+      { "hexcode": "#cffafe", "number": 100, "name": "Oyster Bay" },
+      { "hexcode": "#a5f3fc", "number": 200, "name": "Anakiwa" },
+      { "hexcode": "#67e8f9", "number": 300, "name": "Spray" },
+      { "hexcode": "#22d3ee", "number": 400, "name": "Bright Turquoise" },
+      { "hexcode": "#06b6d4", "number": 500, "name": "Cerulean" },
+      { "hexcode": "#0891b2", "number": 600, "name": "Bondi Blue" },
+      { "hexcode": "#0e7490", "number": 700, "name": "Blue Chill" },
+      { "hexcode": "#155e75", "number": 800, "name": "Blumine" },
+      { "hexcode": "#164e63", "number": 900, "name": "Chathams Blue" },
+      { "hexcode": "#083344", "number": 950, "name": "Tarawera" }
+    ]
+  },
+  {
+    "key": "sky",
+    "palettes": [
+      { "hexcode": "#f0f9ff", "number": 50, "name": "Alice Blue" },
+      { "hexcode": "#e0f2fe", "number": 100, "name": "Pattens Blue" },
+      { "hexcode": "#bae6fd", "number": 200, "name": "French Pass" },
+      { "hexcode": "#7dd3fc", "number": 300, "name": "Malibu" },
+      { "hexcode": "#38bdf8", "number": 400, "name": "Picton Blue" },
+      { "hexcode": "#0ea5e9", "number": 500, "name": "Cerulean" },
+      { "hexcode": "#0284c7", "number": 600, "name": "Lochmara" },
+      { "hexcode": "#0369a1", "number": 700, "name": "Bahama Blue" },
+      { "hexcode": "#075985", "number": 800, "name": "Venice Blue" },
+      { "hexcode": "#0c4a6e", "number": 900, "name": "Chathams Blue" },
+      { "hexcode": "#082f49", "number": 950, "name": "Blue Whale" }
+    ]
+  },
+  {
+    "key": "blue",
+    "palettes": [
+      { "hexcode": "#eff6ff", "number": 50, "name": "Zumthor" },
+      { "hexcode": "#dbeafe", "number": 100, "name": "Hawkes Blue" },
+      { "hexcode": "#bfdbfe", "number": 200, "name": "Tropical Blue" },
+      { "hexcode": "#93c5fd", "number": 300, "name": "Malibu" },
+      { "hexcode": "#60a5fa", "number": 400, "name": "Cornflower Blue" },
+      { "hexcode": "#3b82f6", "number": 500, "name": "Dodger Blue" },
+      { "hexcode": "#2563eb", "number": 600, "name": "Royal Blue" },
+      { "hexcode": "#1d4ed8", "number": 700, "name": "Cerulean Blue" },
+      { "hexcode": "#1e40af", "number": 800, "name": "Persian Blue" },
+      { "hexcode": "#1e3a8a", "number": 900, "name": "Bay of Many" },
+      { "hexcode": "#172554", "number": 950, "name": "Bunting" }
+    ]
+  },
+  {
+    "key": "indigo",
+    "palettes": [
+      { "hexcode": "#eef2ff", "number": 50, "name": "Zircon" },
+      { "hexcode": "#e0e7ff", "number": 100, "name": "Hawkes Blue" },
+      { "hexcode": "#c7d2fe", "number": 200, "name": "Periwinkle" },
+      { "hexcode": "#a5b4fc", "number": 300, "name": "Perano" },
+      { "hexcode": "#818cf8", "number": 400, "name": "Portage" },
+      { "hexcode": "#6366f1", "number": 500, "name": "Royal Blue" },
+      { "hexcode": "#4f46e5", "number": 600, "name": "Royal Blue" },
+      { "hexcode": "#4338ca", "number": 700, "name": "Governor Bay" },
+      { "hexcode": "#3730a3", "number": 800, "name": "Governor Bay" },
+      { "hexcode": "#312e81", "number": 900, "name": "Minsk" },
+      { "hexcode": "#1e1b4b", "number": 950, "name": "Port Gore" }
+    ]
+  },
+  {
+    "key": "violet",
+    "palettes": [
+      { "hexcode": "#f5f3ff", "number": 50, "name": "Titan White" },
+      { "hexcode": "#ede9fe", "number": 100, "name": "Titan White" },
+      { "hexcode": "#ddd6fe", "number": 200, "name": "Fog" },
+      { "hexcode": "#c4b5fd", "number": 300, "name": "Melrose" },
+      { "hexcode": "#a78bfa", "number": 400, "name": "Dull Lavender" },
+      { "hexcode": "#8b5cf6", "number": 500, "name": "Medium Purple" },
+      { "hexcode": "#7c3aed", "number": 600, "name": "Purple Heart" },
+      { "hexcode": "#6d28d9", "number": 700, "name": "Purple Heart" },
+      { "hexcode": "#5b21b6", "number": 800, "name": "Purple Heart" },
+      { "hexcode": "#4c1d95", "number": 900, "name": "Daisy Bush" },
+      { "hexcode": "#2e1065", "number": 950, "name": "Violent Violet" }
+    ]
+  },
+  {
+    "key": "purple",
+    "palettes": [
+      { "hexcode": "#faf5ff", "number": 50, "name": "Magnolia" },
+      { "hexcode": "#f3e8ff", "number": 100, "name": "Blue Chalk" },
+      { "hexcode": "#e9d5ff", "number": 200, "name": "Blue Chalk" },
+      { "hexcode": "#d8b4fe", "number": 300, "name": "Mauve" },
+      { "hexcode": "#c084fc", "number": 400, "name": "Heliotrope" },
+      { "hexcode": "#a855f7", "number": 500, "name": "Medium Purple" },
+      { "hexcode": "#9333ea", "number": 600, "name": "Electric Violet" },
+      { "hexcode": "#7e22ce", "number": 700, "name": "Purple Heart" },
+      { "hexcode": "#6b21a8", "number": 800, "name": "Seance" },
+      { "hexcode": "#581c87", "number": 900, "name": "Daisy Bush" },
+      { "hexcode": "#3b0764", "number": 950, "name": "Christalle" }
+    ]
+  },
+  {
+    "key": "fuchsia",
+    "palettes": [
+      { "hexcode": "#fdf4ff", "number": 50, "name": "White Pointer" },
+      { "hexcode": "#fae8ff", "number": 100, "name": "White Pointer" },
+      { "hexcode": "#f5d0fe", "number": 200, "name": "Mauve" },
+      { "hexcode": "#f0abfc", "number": 300, "name": "Mauve" },
+      { "hexcode": "#e879f9", "number": 400, "name": "Heliotrope" },
+      { "hexcode": "#d946ef", "number": 500, "name": "Heliotrope" },
+      { "hexcode": "#c026d3", "number": 600, "name": "Fuchsia Pink" },
+      { "hexcode": "#a21caf", "number": 700, "name": "Violet Eggplant" },
+      { "hexcode": "#86198f", "number": 800, "name": "Seance" },
+      { "hexcode": "#701a75", "number": 900, "name": "Seance" },
+      { "hexcode": "#4a044e", "number": 950, "name": "Clairvoyant" }
+    ]
+  },
+  {
+    "key": "pink",
+    "palettes": [
+      { "hexcode": "#fdf2f8", "number": 50, "name": "Wisp Pink" },
+      { "hexcode": "#fce7f3", "number": 100, "name": "Carousel Pink" },
+      { "hexcode": "#fbcfe8", "number": 200, "name": "Classic Rose" },
+      { "hexcode": "#f9a8d4", "number": 300, "name": "Lavender Pink" },
+      { "hexcode": "#f472b6", "number": 400, "name": "Persian Pink" },
+      { "hexcode": "#ec4899", "number": 500, "name": "Brilliant Rose" },
+      { "hexcode": "#db2777", "number": 600, "name": "Cerise" },
+      { "hexcode": "#be185d", "number": 700, "name": "Maroon Flush" },
+      { "hexcode": "#9d174d", "number": 800, "name": "Disco" },
+      { "hexcode": "#831843", "number": 900, "name": "Disco" },
+      { "hexcode": "#500724", "number": 950, "name": "Cab Sav" }
+    ]
+  },
+  {
+    "key": "rose",
+    "palettes": [
+      { "hexcode": "#fff1f2", "number": 50, "name": "Lavender blush" },
+      { "hexcode": "#ffe4e6", "number": 100, "name": "Cosmos" },
+      { "hexcode": "#fecdd3", "number": 200, "name": "Pastel Pink" },
+      { "hexcode": "#fda4af", "number": 300, "name": "Sweet Pink" },
+      { "hexcode": "#fb7185", "number": 400, "name": "Froly" },
+      { "hexcode": "#f43f5e", "number": 500, "name": "Radical Red" },
+      { "hexcode": "#e11d48", "number": 600, "name": "Amaranth" },
+      { "hexcode": "#be123c", "number": 700, "name": "Cardinal" },
+      { "hexcode": "#9f1239", "number": 800, "name": "Shiraz" },
+      { "hexcode": "#881337", "number": 900, "name": "Claret" },
+      { "hexcode": "#4c0519", "number": 950, "name": "Cab Sav" }
+    ]
+  }
+]

packages/color-palette/src/name.ts

@@ -0,0 +1,46 @@
+import { getHex, getRgb, getHsl } from './color';
+import colorNames from './json/color-name.json';
+
+export function getColorName(color: string) {
+  const hex = getHex(color);
+  const rgb = getRgb(color);
+  const hsl = getHsl(color);
+
+  let ndf = 0;
+  let ndf1 = 0;
+  let ndf2 = 0;
+  let cl = -1;
+  let df = -1;
+
+  let name = '';
+
+  colorNames.some((item, index) => {
+    const [hexValue, colorName] = item;
+
+    const hexcode = `#${hexValue}`;
+
+    const match = hex === hexcode;
+
+    if (match) {
+      name = colorName;
+    } else {
+      const { r, g, b } = getRgb(hexcode);
+      const { h, s, l } = getHsl(hexcode);
+
+      ndf1 = (rgb.r - r) ** 2 + (rgb.g - g) ** 2 + (rgb.b - b) ** 2;
+      ndf2 = (hsl.h - h) ** 2 + (hsl.s - s) ** 2 + (hsl.l - l) ** 2;
+
+      ndf = ndf1 + ndf2 * 2;
+      if (df < 0 || df > ndf) {
+        df = ndf;
+        cl = index;
+      }
+    }
+
+    return match;
+  });
+
+  name = cl < 0 ? 'Invalid Color' : colorNames[cl][1];
+
+  return name;
+}

packages/color-palette/src/palette.ts

@@ -0,0 +1,95 @@
+import { isValidColor, getHsl, getDeltaE, transformHslToHex } from './color';
+import { getColorName } from './name';
+import type { ColorPaletteFamily, ColorPaletteFamilyWithNearestPalette } from './type';
+import defaultPalettes from './json/palette.json';
+
+export function getNearestColorPaletteFamily(color: string, families: ColorPaletteFamily[]) {
+  const familyWithConfig = families.map(family => {
+    const palettes = family.palettes.map(palette => {
+      return {
+        ...palette,
+        delta: getDeltaE(color, palette.hexcode)
+      };
+    });
+
+    const nearestPalette = palettes.reduce((prev, curr) => (prev.delta < curr.delta ? prev : curr));
+
+    return {
+      ...family,
+      palettes,
+      nearestPalette
+    };
+  });
+
+  const nearestPaletteFamily = familyWithConfig.reduce((prev, curr) =>
+    prev.nearestPalette.delta < curr.nearestPalette.delta ? prev : curr
+  );
+
+  const { l } = getHsl(color);
+
+  const paletteFamily: ColorPaletteFamilyWithNearestPalette = {
+    ...nearestPaletteFamily,
+    nearestLightnessPalette: nearestPaletteFamily.palettes.reduce((prev, curr) => {
+      const { l: prevLightness } = getHsl(prev.hexcode);
+      const { l: currLightness } = getHsl(curr.hexcode);
+
+      const deltaPrev = Math.abs(prevLightness - l);
+      const deltaCurr = Math.abs(currLightness - l);
+
+      return deltaPrev < deltaCurr ? prev : curr;
+    })
+  };
+
+  return paletteFamily;
+}
+
+export function getColorPaletteFamily(color: string, colorName: string) {
+  if (!isValidColor(color)) {
+    throw new Error('Invalid color, please check color value!');
+  }
+
+  const { h: h1, s: s1 } = getHsl(color);
+
+  const { nearestLightnessPalette, palettes } = getNearestColorPaletteFamily(
+    color,
+    defaultPalettes as ColorPaletteFamily[]
+  );
+
+  const { number, hexcode } = nearestLightnessPalette;
+
+  const { h: h2, s: s2 } = getHsl(hexcode);
+
+  const deltaH = h1 - h2 || h2;
+
+  const sRatio = s1 / s2;
+
+  const colorPaletteFamily: ColorPaletteFamily = {
+    key: colorName,
+    palettes: palettes.map(palette => {
+      let hexValue = color;
+
+      const isSame = number === palette.number;
+
+      if (!isSame) {
+        const { h: h3, s: s3, l } = getHsl(palette.hexcode);
+
+        const newH = deltaH < 0 ? h3 + deltaH : deltaH;
+        const newS = s3 * sRatio;
+
+        hexValue = transformHslToHex({
+          h: newH,
+          s: newS,
+          l
+        });
+      }
+
+      return {
+        hexcode: hexValue,
+        number: palette.number,
+        name: getColorName(hexValue)
+      };
+    })
+  };
+
+  return colorPaletteFamily;
+}

packages/color-palette/src/type.ts

@@ -0,0 +1,63 @@
+/**
+ * the color palette number
+ */
+export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
+
+/**
+ * the color palette item
+ */
+export type ColorPaletteItem = {
+  /**
+   * the color hexcode
+   */
+  hexcode: string;
+  /**
+   * the color number
+   * @link {@link ColorPaletteNumber}
+   */
+  number: ColorPaletteNumber;
+  /**
+   * the color name
+   */
+  name: string;
+};
+
+export type ColorPaletteFamily = {
+  /**
+   * the color palette family key
+   */
+  key: string;
+  /**
+   * the color palette family's palettes
+   */
+  palettes: ColorPaletteItem[];
+};
+
+export type ColorPaletteWithDelta = ColorPaletteItem & {
+  delta: number;
+};
+
+export type ColorPaletteItemWithName = ColorPaletteItem & {
+  name: string;
+};
+
+export type ColorPaletteFamilyWithNearestPalette = ColorPaletteFamily & {
+  nearestPalette: ColorPaletteWithDelta;
+  nearestLightnessPalette: ColorPaletteWithDelta;
+};
+
+export type ColorPalette = ColorPaletteFamily & {
+  /**
+   * the color map of the palette
+   */
+  colorMap: Map<ColorPaletteNumber, ColorPaletteItem>;
+  /**
+   * the main color of the palette
+   * @description which number is 500
+   */
+  main: ColorPaletteItemWithName;
+  /**
+   * the match color of the palette
+   */
+  match: ColorPaletteItemWithName;
+};