2022-03-23 12:28:51 -07:00
|
|
|
import { Map as ImmutableMap, fromJS } from 'immutable';
|
|
|
|
|
|
|
|
import tintify from 'soapbox/utils/colors';
|
2022-07-22 10:30:16 -07:00
|
|
|
import { generateAccent, generateNeutral } from 'soapbox/utils/theme';
|
2022-03-23 12:28:51 -07:00
|
|
|
|
|
|
|
import type { TailwindColorPalette } from 'soapbox/types/colors';
|
|
|
|
|
|
|
|
type SoapboxConfig = ImmutableMap<string, any>;
|
|
|
|
type SoapboxColors = ImmutableMap<string, any>;
|
|
|
|
|
|
|
|
/** Check if the value is a valid hex color */
|
|
|
|
const isHex = (value: any): boolean => /^#([0-9A-F]{3}){1,2}$/i.test(value);
|
|
|
|
|
|
|
|
/** Expand hex colors into tints */
|
|
|
|
export const expandPalette = (palette: TailwindColorPalette): TailwindColorPalette => {
|
|
|
|
// Generate palette only for present colors
|
|
|
|
return Object.entries(palette).reduce((result: TailwindColorPalette, colorData) => {
|
|
|
|
const [colorName, color] = colorData;
|
|
|
|
|
|
|
|
// Conditionally handle hex color and Tailwind color object
|
|
|
|
if (typeof color === 'string' && isHex(color)) {
|
|
|
|
result[colorName] = tintify(color);
|
2022-03-23 13:31:19 -07:00
|
|
|
} else if (color && typeof color === 'object') {
|
2022-03-23 12:28:51 -07:00
|
|
|
result[colorName] = color;
|
|
|
|
}
|
|
|
|
|
|
|
|
return result;
|
|
|
|
}, {});
|
|
|
|
};
|
|
|
|
|
2022-03-23 13:31:19 -07:00
|
|
|
// Generate accent color only if brandColor is present
|
|
|
|
const maybeGenerateAccentColor = (brandColor: any): string | null => {
|
|
|
|
return isHex(brandColor) ? generateAccent(brandColor) : null;
|
|
|
|
};
|
|
|
|
|
2022-03-23 12:28:51 -07:00
|
|
|
/** Build a color object from legacy colors */
|
|
|
|
export const fromLegacyColors = (soapboxConfig: SoapboxConfig): TailwindColorPalette => {
|
2022-03-23 13:31:19 -07:00
|
|
|
const brandColor = soapboxConfig.get('brandColor');
|
|
|
|
const accentColor = soapboxConfig.get('accentColor');
|
2022-07-22 10:30:16 -07:00
|
|
|
const accent = isHex(accentColor) ? accentColor : maybeGenerateAccentColor(brandColor);
|
2022-03-23 13:31:19 -07:00
|
|
|
|
2022-03-23 12:28:51 -07:00
|
|
|
return expandPalette({
|
2022-03-23 13:31:19 -07:00
|
|
|
primary: isHex(brandColor) ? brandColor : null,
|
2022-07-22 10:30:16 -07:00
|
|
|
secondary: accent,
|
|
|
|
accent,
|
|
|
|
gray: (isHex(brandColor) ? generateNeutral(brandColor) : null) as any,
|
2022-03-23 12:28:51 -07:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
/** Convert Soapbox Config into Tailwind colors */
|
2022-03-23 13:31:19 -07:00
|
|
|
export const toTailwind = (soapboxConfig: SoapboxConfig): SoapboxConfig => {
|
2022-03-23 12:28:51 -07:00
|
|
|
const colors: SoapboxColors = ImmutableMap(soapboxConfig.get('colors'));
|
2023-09-08 11:28:23 -07:00
|
|
|
const legacyColors = ImmutableMap(fromJS(fromLegacyColors(soapboxConfig))) as SoapboxColors;
|
2022-03-23 12:28:51 -07:00
|
|
|
|
2022-03-23 13:31:19 -07:00
|
|
|
return soapboxConfig.set('colors', legacyColors.mergeDeep(colors));
|
2022-03-23 12:28:51 -07:00
|
|
|
};
|