@clerk/themes
Version:
Themes for the Clerk auth components
114 lines (113 loc) • 5.26 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.colorOptionToHslaLightnessScale = exports.colorOptionToHslaAlphaScale = void 0;
const colors_1 = require("./colors");
const fromEntries_1 = require("./fromEntries");
const LIGHT_SHADES = ['25', '50', '100', '150', '200', '300', '400'].reverse();
const DARK_SHADES = ['600', '700', '750', '800', '850', '900', '950'];
const ALL_SHADES = [...[...LIGHT_SHADES].reverse(), '500', ...DARK_SHADES];
const TARGET_L_50_SHADE = 97;
const TARGET_L_900_SHADE = 12;
function createEmptyColorScale() {
return {
'25': undefined,
'50': undefined,
'100': undefined,
'150': undefined,
'200': undefined,
'300': undefined,
'400': undefined,
'500': undefined,
'600': undefined,
'700': undefined,
'750': undefined,
'800': undefined,
'850': undefined,
'900': undefined,
'950': undefined,
};
}
const colorOptionToHslaAlphaScale = (colorOption, prefix) => {
return getUserProvidedScaleOrGenerateHslaColorsScale(colorOption, prefix, generateFilledAlphaScaleFromBaseHslaColor);
};
exports.colorOptionToHslaAlphaScale = colorOptionToHslaAlphaScale;
const colorOptionToHslaLightnessScale = (colorOption, prefix) => {
return fillUserProvidedScaleWithGeneratedHslaColors(colorOption, prefix, generateFilledScaleFromBaseHslaColor);
};
exports.colorOptionToHslaLightnessScale = colorOptionToHslaLightnessScale;
const getUserProvidedScaleOrGenerateHslaColorsScale = (colorOption, prefix, generator) => {
if (!colorOption) {
return undefined;
}
if (typeof colorOption === 'object' && !ALL_SHADES.every(key => key in colorOption)) {
throw new Error('You need to provide all the following shades: ' + ALL_SHADES.join(', '));
}
if (typeof colorOption === 'object') {
const scale = Object.keys(colorOption).reduce((acc, key) => {
// @ts-expect-error
acc[key] = colors_1.colors.toHslaColor(colorOption[key]);
return acc;
}, createEmptyColorScale());
return prefixAndStringifyHslaScale(scale, prefix);
}
const hslaColor = colors_1.colors.toHslaColor(colorOption);
const filledHslaColorScale = generator(hslaColor);
return prefixAndStringifyHslaScale(filledHslaColorScale, prefix);
};
const fillUserProvidedScaleWithGeneratedHslaColors = (colorOption, prefix, generator) => {
if (!colorOption) {
return undefined;
}
if (typeof colorOption === 'object' && !colorOption['500']) {
throw new Error('You need to provide at least the 500 shade');
}
const userDefinedHslaColorScale = userDefinedColorToHslaColorScale(colorOption);
const filledHslaColorScale = generator(userDefinedHslaColorScale['500']);
const merged = mergeFilledIntoUserDefinedScale(filledHslaColorScale, userDefinedHslaColorScale);
return prefixAndStringifyHslaScale(merged, prefix);
};
const mergeFilledIntoUserDefinedScale = (generated, userDefined) => {
// @ts-expect-error
return (0, fromEntries_1.fromEntries)(Object.entries(userDefined).map(([k, v]) => [k, v || generated[k]]));
};
const prefixAndStringifyHslaScale = (scale, prefix) => {
const res = {};
for (const key in scale) {
// @ts-expect-error
if (scale[key]) {
// @ts-expect-error
res[prefix + key] = colors_1.colors.toHslaString(scale[key]);
}
}
return res;
};
const userDefinedColorToHslaColorScale = (colorOption) => {
const baseScale = typeof colorOption === 'string' ? { '500': colorOption } : colorOption;
const hslaScale = createEmptyColorScale();
// @ts-expect-error
const entries = Object.keys(hslaScale).map(k => [k, baseScale[k] ? colors_1.colors.toHslaColor(baseScale[k]) : undefined]);
return (0, fromEntries_1.fromEntries)(entries);
};
/**
* This function generates a color scale using `base` as the 500 shade.
* The lightest shade (50) will always have a lightness of TARGET_L_50_SHADE,
* and the darkest shade (900) will always have a lightness of TARGET_L_900_SHADE.
* It calculates the required inc/decr lightness steps and applies them to base
*/
const generateFilledScaleFromBaseHslaColor = (base) => {
const newScale = createEmptyColorScale();
newScale['500'] = base;
const lightPercentage = (TARGET_L_50_SHADE - base.l) / LIGHT_SHADES.length;
const darkPercentage = (base.l - TARGET_L_900_SHADE) / DARK_SHADES.length;
LIGHT_SHADES.forEach((shade, i) => (newScale[shade] = colors_1.colors.changeHslaLightness(base, (i + 1) * lightPercentage)));
DARK_SHADES.map((shade, i) => (newScale[shade] = colors_1.colors.changeHslaLightness(base, (i + 1) * darkPercentage * -1)));
return newScale;
};
const generateFilledAlphaScaleFromBaseHslaColor = (base) => {
const newScale = createEmptyColorScale();
const baseWithoutAlpha = colors_1.colors.setHslaAlpha(base, 0);
const alphas = [0.02, 0.03, 0.07, 0.11, 0.15, 0.28, 0.41, 0.53, 0.62, 0.73, 0.78, 0.81, 0.84, 0.87, 0.92];
// @ts-expect-error
Object.keys(newScale).forEach((k, i) => (newScale[k] = colors_1.colors.setHslaAlpha(baseWithoutAlpha, alphas[i])));
return newScale;
};