@antv/s2
Version:
effective spreadsheet render core lib
94 lines • 3.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.generatePalette = exports.generateStandardColors = exports.isReadableText = exports.shouldReverseFontColor = void 0;
const tslib_1 = require("tslib");
const lodash_1 = require("lodash");
const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
const condition_1 = require("../common/constant/condition");
const WHITE_COLOR = '#FFFFFF';
const BLACK_COLOR = '#000000';
/** S2 标准色板 mix 规则 */
const STANDARD_COLOR_MIX_PERCENT = [95, 85, 75, 30, 15, 0, 15, 30, 45, 60, 80];
/**
* basic color 数量
* @see Palette.basicColors
*/
const BASIC_COLOR_COUNT = 15;
/**
* 智能反色使用
* @param color
*/
const shouldReverseFontColor = (color) => (0, tinycolor2_1.default)(color).getLuminance() <= 0.5;
exports.shouldReverseFontColor = shouldReverseFontColor;
/**
* @param backgroundColor
* @param fontColor
*/
const isReadableText = (backgroundColor, fontColor) => {
return tinycolor2_1.default.isReadable(backgroundColor, fontColor, {
level: 'AA',
size: 'small',
});
};
exports.isReadableText = isReadableText;
const FONT_COLOR_RELATIONS = [
{
fontColorIndex: 0,
bgColorIndex: 3,
},
{
fontColorIndex: 13,
bgColorIndex: 8,
},
{
fontColorIndex: 14,
bgColorIndex: 1,
},
];
/**
* 生成 s2 设计规范下的标准色（共 11 个）
*
* - 第 1~5 为主题色加白
* - 第 6 为主题色
* - 第 7~11 为主题色加黑
*
* @param brandColor 主题色
* @returns 标准色卡
*/
const generateStandardColors = (brandColor) => {
const standardColors = [];
for (let index = 0; index < 11; index++) {
const mixPercent = STANDARD_COLOR_MIX_PERCENT[index];
standardColors.push(mixPercent === 0
? (0, lodash_1.toUpper)(brandColor)
: (0, lodash_1.toUpper)(tinycolor2_1.default
.mix(brandColor, index < 5 ? WHITE_COLOR : BLACK_COLOR, mixPercent)
.toHexString()));
}
return standardColors;
};
exports.generateStandardColors = generateStandardColors;
/**
* 根据 S2 内置色板及自选主题色生成新色板
* @param paletteMeta @PaletteMeta
* @returns 新色板
*/
const generatePalette = (paletteMeta = {}) => {
const basicColors = Array.from(Array(BASIC_COLOR_COUNT)).fill(condition_1.REVERSE_FONT_COLOR);
const { basicColorRelations = [], brandColor } = paletteMeta;
const standardColors = (0, exports.generateStandardColors)(brandColor);
// 使用标准色填充 basicColors
basicColorRelations.forEach((relation) => {
basicColors[relation.basicColorIndex] =
standardColors[relation.standardColorIndex];
});
// 根据背景明暗设置字体颜色
FONT_COLOR_RELATIONS.forEach(({ fontColorIndex, bgColorIndex }) => {
basicColors[fontColorIndex] = (0, exports.shouldReverseFontColor)(basicColors[bgColorIndex])
? condition_1.REVERSE_FONT_COLOR
: condition_1.DEFAULT_FONT_COLOR;
});
return Object.assign(Object.assign({}, paletteMeta), { basicColors });
};
exports.generatePalette = generatePalette;
//# sourceMappingURL=color.js.map