refactor(hooks): refactor @sa/color-palette

This commit is contained in:
Soybean
2024-04-16 00:57:24 +08:00
parent d9af5aa2d3
commit 93191737dd
15 changed files with 2163 additions and 2061 deletions

View File

@@ -1,57 +1,6 @@
import { getColorPaletteFamily } from './palette';
import { getColorName } from './name';
import type { ColorPalette, ColorPaletteFamily, ColorPaletteItem, ColorPaletteNumber } from './type';
import defaultPalettes from './json/palette.json';
import { colorPalettes } from './constant';
import { getColorName, getHex, getHsl, getRgb } from './shared';
// to do: there is a bug in the code below, when the color is '#1c5cff', the colorPaletteFamily is not similar to the provided color
/**
* 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
* @returns 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 };
export * from './palette';
export { getColorName, getHex, getHsl, getRgb, colorPalettes };
export * from './types';