diff --git a/CHANGELOG.md b/CHANGELOG.md index ad41dfe06..0a7f0e9ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,7 +30,7 @@ ###    💅 Refactors -- **hooks**: refactor @sa/color-palette  -  by @honghuangdc [(93191)](https://github.com/soybeanjs/soybean-admin/commit/9319173) +- **hooks**: refactor @sa/color  -  by @honghuangdc [(93191)](https://github.com/soybeanjs/soybean-admin/commit/9319173) ###    📖 Documentation diff --git a/package.json b/package.json index 1f554f3ba..39af44ec2 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@better-scroll/core": "2.5.1", "@iconify/vue": "4.1.2", "@sa/axios": "workspace:*", - "@sa/color-palette": "workspace:*", + "@sa/color": "workspace:*", "@sa/hooks": "workspace:*", "@sa/materials": "workspace:*", "@sa/utils": "workspace:*", diff --git a/packages/color-palette/src/index.ts b/packages/color-palette/src/index.ts deleted file mode 100644 index 56fde01d1..000000000 --- a/packages/color-palette/src/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { colorPalettes } from './constant'; -import { getColorName, getHex, getHsl, getRgb } from './shared'; - -export * from './palette'; -export { getColorName, getHex, getHsl, getRgb, colorPalettes }; -export * from './types'; diff --git a/packages/color-palette/src/shared/colord.ts b/packages/color-palette/src/shared/colord.ts deleted file mode 100644 index 797148dd5..000000000 --- a/packages/color-palette/src/shared/colord.ts +++ /dev/null @@ -1,29 +0,0 @@ -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(); -} diff --git a/packages/color-palette/package.json b/packages/color/package.json similarity index 76% rename from packages/color-palette/package.json rename to packages/color/package.json index f246d262a..9d9aaf30a 100644 --- a/packages/color-palette/package.json +++ b/packages/color/package.json @@ -1,5 +1,5 @@ { - "name": "@sa/color-palette", + "name": "@sa/color", "version": "1.0.5", "exports": { ".": "./src/index.ts" @@ -10,6 +10,7 @@ } }, "dependencies": { + "@sa/utils": "workspace:*", "colord": "2.9.3" } } diff --git a/packages/color-palette/src/constant/index.ts b/packages/color/src/constant/index.ts similarity index 100% rename from packages/color-palette/src/constant/index.ts rename to packages/color/src/constant/index.ts diff --git a/packages/color-palette/src/constant/name.ts b/packages/color/src/constant/name.ts similarity index 100% rename from packages/color-palette/src/constant/name.ts rename to packages/color/src/constant/name.ts diff --git a/packages/color-palette/src/constant/palette.ts b/packages/color/src/constant/palette.ts similarity index 100% rename from packages/color-palette/src/constant/palette.ts rename to packages/color/src/constant/palette.ts diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts new file mode 100644 index 000000000..42a4d5471 --- /dev/null +++ b/packages/color/src/index.ts @@ -0,0 +1,7 @@ +import { colorPalettes } from './constant'; + +export * from './palette'; +export * from './shared'; +export { colorPalettes }; + +export * from './types'; diff --git a/packages/utils/src/color.ts b/packages/color/src/palette/antd.ts similarity index 53% rename from packages/utils/src/color.ts rename to packages/color/src/palette/antd.ts index 88c359596..c3d5b4882 100644 --- a/packages/utils/src/color.ts +++ b/packages/color/src/palette/antd.ts @@ -1,74 +1,6 @@ -import { colord, extend } from 'colord'; -import namesPlugin from 'colord/plugins/names'; -import mixPlugin from 'colord/plugins/mix'; -import type { AnyColor, HsvColor, RgbColor } from 'colord'; - -extend([namesPlugin, mixPlugin]); - -/** - * Add color alpha - * - * @param color - Color - * @param alpha - Alpha (0 - 1) - */ -export function addColorAlpha(color: string, alpha: number) { - return colord(color).alpha(alpha).toHex(); -} - -/** - * Mix color - * - * @param firstColor - First color - * @param secondColor - Second color - * @param ratio - The ratio of the second color (0 - 1) - */ -export function mixColor(firstColor: string, secondColor: string, ratio: number) { - return colord(firstColor).mix(secondColor, ratio).toHex(); -} - -/** - * Transform color with opacity to similar color without opacity - * - * @param color - Color - * @param alpha - Alpha (0 - 1) - * @param bgColor Background color (usually white or black) - */ -export function transformColorWithOpacity(color: string, alpha: number, bgColor = '#ffffff') { - const originColor = addColorAlpha(color, alpha); - const { r: oR, g: oG, b: oB } = colord(originColor).toRgb(); - - const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb(); - - function calRgb(or: number, bg: number, al: number) { - return bg + (or - bg) * al; - } - - const resultRgb: RgbColor = { - r: calRgb(oR, bgR, alpha), - g: calRgb(oG, bgG, alpha), - b: calRgb(oB, bgB, alpha) - }; - - return colord(resultRgb).toHex(); -} - -/** - * Is white color - * - * @param color - Color - */ -export function isWhiteColor(color: string) { - return colord(color).isEqual('#ffffff'); -} - -/** - * Get rgb of color - * - * @param color Color - */ -export function getRgbOfColor(color: string) { - return colord(color).toRgb(); -} +import type { AnyColor, HsvColor } from 'colord'; +import { getHex, getHsv, isValidColor, mixColor } from '../shared'; +import type { ColorIndex } from '../types'; /** Hue step */ const hueStep = 2; @@ -86,32 +18,23 @@ const lightColorCount = 5; const darkColorCount = 4; /** - * The color index of color palette - * - * From left to right, the color is from light to dark, 6 is main color - */ -type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; - -/** - * Get color palette (from left to right, the color is from light to dark, 6 is main color) + * Get AntD palette color by index * * @param color - Color * @param index - The color index of color palette (the main color index is 6) * @returns Hex color */ -export function getColorPalette(color: AnyColor, index: ColorIndex): string { - const transformColor = colord(color); - - if (!transformColor.isValid()) { +export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex): string { + if (!isValidColor(color)) { throw new Error('invalid input color value'); } if (index === 6) { - return colord(transformColor).toHex(); + return getHex(color); } const isLight = index < 6; - const hsv = transformColor.toHsv(); + const hsv = getHsv(color); const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; const newHsv: HsvColor = { @@ -120,7 +43,7 @@ export function getColorPalette(color: AnyColor, index: ColorIndex): string { v: getValue(hsv, i, isLight) }; - return colord(newHsv).toHex(); + return getHex(newHsv); } /** Map of dark color index and opacity */ @@ -131,32 +54,33 @@ const darkColorMap = [ { index: 5, opacity: 0.45 }, { index: 5, opacity: 0.65 }, { index: 5, opacity: 0.85 }, - { index: 4, opacity: 0.9 }, + { index: 5, opacity: 0.9 }, + { index: 4, opacity: 0.93 }, { index: 3, opacity: 0.95 }, { index: 2, opacity: 0.97 }, { index: 1, opacity: 0.98 } ]; /** - * Get color palettes + * Get AntD color palette * * @param color - Color * @param darkTheme - Dark theme * @param darkThemeMixColor - Dark theme mix color (default: #141414) */ -export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] { - const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; +export function getAntDColorPalette(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] { + const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; - const patterns = indexes.map(index => getColorPalette(color, index)); + const patterns = indexes.map(index => getAntDPaletteColorByIndex(color, index)); if (darkTheme) { const darkPatterns = darkColorMap.map(({ index, opacity }) => { - const darkColor = colord(darkThemeMixColor).mix(patterns[index], opacity); + const darkColor = mixColor(darkThemeMixColor, patterns[index], opacity); return darkColor; }); - return darkPatterns.map(item => colord(item).toHex()); + return darkPatterns.map(item => getHex(item)); } return patterns; diff --git a/packages/color/src/palette/index.ts b/packages/color/src/palette/index.ts new file mode 100644 index 000000000..ba3b85355 --- /dev/null +++ b/packages/color/src/palette/index.ts @@ -0,0 +1,45 @@ +import type { AnyColor } from 'colord'; +import { getHex } from '../shared'; +import type { ColorPaletteNumber } from '../types'; +import { getRecommendedColorPalette } from './recommend'; +import { getAntDColorPalette } from './antd'; + +/** + * get color palette by provided color + * + * @param color + * @param recommended whether to get recommended color palette (the provided color may not be the main color) + */ +export function getColorPalette(color: AnyColor, recommended = false) { + const colorMap = new Map(); + + if (recommended) { + const colorPalette = getRecommendedColorPalette(getHex(color)); + colorPalette.palettes.forEach(palette => { + colorMap.set(palette.number, palette.hex); + }); + } else { + const colors = getAntDColorPalette(color); + + const colorNumbers: ColorPaletteNumber[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]; + + colorNumbers.forEach((number, index) => { + colorMap.set(number, colors[index]); + }); + } + + return colorMap; +} + +/** + * get color palette color by number + * + * @param color the provided color + * @param number the color palette number + * @param recommended whether to get recommended color palette (the provided color may not be the main color) + */ +export function getPaletteColorByNumber(color: AnyColor, number: ColorPaletteNumber, recommended = false) { + const colorMap = getColorPalette(color, recommended); + + return colorMap.get(number as ColorPaletteNumber)!; +} diff --git a/packages/color-palette/src/palette/index.ts b/packages/color/src/palette/recommend.ts similarity index 88% rename from packages/color-palette/src/palette/index.ts rename to packages/color/src/palette/recommend.ts index 354bd51a7..904cae259 100644 --- a/packages/color-palette/src/palette/index.ts +++ b/packages/color/src/palette/recommend.ts @@ -9,12 +9,12 @@ import type { } from '../types'; /** - * get color palette by provided color and color name + * get recommended color palette by provided color * * @param color the provided color */ -export function getColorPalette(color: string) { - const colorPaletteFamily = getColorPaletteFamily(color); +export function getRecommendedColorPalette(color: string) { + const colorPaletteFamily = getRecommendedColorPaletteFamily(color); const colorMap = new Map(); @@ -36,13 +36,13 @@ export function getColorPalette(color: string) { } /** - * get color by number + * get recommended palette color by provided color * * @param color the provided color * @param number the color palette number */ -export function getColorByPaletteNumber(color: string, number: ColorPaletteNumber) { - const colorPalette = getColorPalette(color); +export function getRecommendedPaletteColorByNumber(color: string, number: ColorPaletteNumber) { + const colorPalette = getRecommendedColorPalette(color); const { hex } = colorPalette.colorMap.get(number)!; @@ -54,7 +54,7 @@ export function getColorByPaletteNumber(color: string, number: ColorPaletteNumbe * * @param color the provided color */ -export function getColorPaletteFamily(color: string) { +export function getRecommendedColorPaletteFamily(color: string) { if (!isValidColor(color)) { throw new Error('Invalid color, please check color value!'); } diff --git a/packages/color/src/shared/colord.ts b/packages/color/src/shared/colord.ts new file mode 100644 index 000000000..4c52330a4 --- /dev/null +++ b/packages/color/src/shared/colord.ts @@ -0,0 +1,93 @@ +import { colord, extend } from 'colord'; +import namesPlugin from 'colord/plugins/names'; +import mixPlugin from 'colord/plugins/mix'; +import labPlugin from 'colord/plugins/lab'; +import type { AnyColor, HslColor, RgbColor } from 'colord'; + +extend([namesPlugin, mixPlugin, labPlugin]); + +export function isValidColor(color: AnyColor) { + return colord(color).isValid(); +} + +export function getHex(color: AnyColor) { + return colord(color).toHex(); +} + +export function getRgb(color: AnyColor) { + return colord(color).toRgb(); +} + +export function getHsl(color: AnyColor) { + return colord(color).toHsl(); +} + +export function getHsv(color: AnyColor) { + return colord(color).toHsv(); +} + +export function getDeltaE(color1: AnyColor, color2: AnyColor) { + return colord(color1).delta(color2); +} + +export function transformHslToHex(color: HslColor) { + return colord(color).toHex(); +} + +/** + * Add color alpha + * + * @param color - Color + * @param alpha - Alpha (0 - 1) + */ +export function addColorAlpha(color: AnyColor, alpha: number) { + return colord(color).alpha(alpha).toHex(); +} + +/** + * Mix color + * + * @param firstColor - First color + * @param secondColor - Second color + * @param ratio - The ratio of the second color (0 - 1) + */ +export function mixColor(firstColor: AnyColor, secondColor: AnyColor, ratio: number) { + return colord(firstColor).mix(secondColor, ratio).toHex(); +} + +/** + * Transform color with opacity to similar color without opacity + * + * @param color - Color + * @param alpha - Alpha (0 - 1) + * @param bgColor Background color (usually white or black) + */ +export function transformColorWithOpacity(color: AnyColor, alpha: number, bgColor = '#ffffff') { + const originColor = addColorAlpha(color, alpha); + const { r: oR, g: oG, b: oB } = colord(originColor).toRgb(); + + const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb(); + + function calRgb(or: number, bg: number, al: number) { + return bg + (or - bg) * al; + } + + const resultRgb: RgbColor = { + r: calRgb(oR, bgR, alpha), + g: calRgb(oG, bgG, alpha), + b: calRgb(oB, bgB, alpha) + }; + + return colord(resultRgb).toHex(); +} + +/** + * Is white color + * + * @param color - Color + */ +export function isWhiteColor(color: AnyColor) { + return colord(color).isEqual('#ffffff'); +} + +export { colord }; diff --git a/packages/color-palette/src/shared/index.ts b/packages/color/src/shared/index.ts similarity index 100% rename from packages/color-palette/src/shared/index.ts rename to packages/color/src/shared/index.ts diff --git a/packages/color-palette/src/shared/name.ts b/packages/color/src/shared/name.ts similarity index 100% rename from packages/color-palette/src/shared/name.ts rename to packages/color/src/shared/name.ts diff --git a/packages/color-palette/src/types/index.ts b/packages/color/src/types/index.ts similarity index 82% rename from packages/color-palette/src/types/index.ts rename to packages/color/src/types/index.ts index 46ceb4570..3a63bc860 100644 --- a/packages/color-palette/src/types/index.ts +++ b/packages/color/src/types/index.ts @@ -1,4 +1,8 @@ -/** the color palette number */ +/** + * the color palette number + * + * the main color number is 500 + */ export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950; /** the color palette */ @@ -45,3 +49,10 @@ export type ColorPaletteMatch = ColorPaletteFamily & { /** the match color of the palette */ match: ColorPalette; }; + +/** + * The color index of color palette + * + * From left to right, the color is from light to dark, 6 is main color + */ +export type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11; diff --git a/packages/color/tsconfig.json b/packages/color/tsconfig.json new file mode 100644 index 000000000..5823ed54e --- /dev/null +++ b/packages/color/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ESNext", + "jsx": "preserve", + "lib": ["DOM", "ESNext"], + "baseUrl": ".", + "module": "ESNext", + "moduleResolution": "node", + "resolveJsonModule": true, + "types": ["node"], + "strict": true, + "strictNullChecks": true, + "noUnusedLocals": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] +} diff --git a/packages/materials/src/libs/page-tab/shared.ts b/packages/materials/src/libs/page-tab/shared.ts index c6ff0c395..db71f5d9c 100644 --- a/packages/materials/src/libs/page-tab/shared.ts +++ b/packages/materials/src/libs/page-tab/shared.ts @@ -1,4 +1,4 @@ -import { addColorAlpha, transformColorWithOpacity } from '@sa/utils'; +import { addColorAlpha, transformColorWithOpacity } from '@sa/color'; import type { PageTabCssVars, PageTabCssVarsProps } from '../../types'; /** The active color of the tab */ diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index a12ed34e7..98c5d245a 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,4 +1,3 @@ -export * from './color'; export * from './crypto'; export * from './storage'; export * from './nanoid'; diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json new file mode 100644 index 000000000..5823ed54e --- /dev/null +++ b/packages/utils/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ESNext", + "jsx": "preserve", + "lib": ["DOM", "ESNext"], + "baseUrl": ".", + "module": "ESNext", + "moduleResolution": "node", + "resolveJsonModule": true, + "types": ["node"], + "strict": true, + "strictNullChecks": true, + "noUnusedLocals": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "dist"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 77474187c..d41ed623d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,9 +17,9 @@ importers: '@sa/axios': specifier: workspace:* version: link:packages/axios - '@sa/color-palette': + '@sa/color': specifier: workspace:* - version: link:packages/color-palette + version: link:packages/color '@sa/hooks': specifier: workspace:* version: link:packages/hooks @@ -179,8 +179,11 @@ importers: specifier: 6.9.15 version: 6.9.15 - packages/color-palette: + packages/color: dependencies: + '@sa/utils': + specifier: workspace:* + version: link:../utils colord: specifier: 2.9.3 version: 2.9.3 diff --git a/src/components/custom/wave-bg.vue b/src/components/custom/wave-bg.vue index bd79fc279..1d63f2e69 100644 --- a/src/components/custom/wave-bg.vue +++ b/src/components/custom/wave-bg.vue @@ -1,6 +1,6 @@