bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve color normalization

Browse source
This commit is contained in:
Alex Gleason 2022-03-28 18:00:04 -05:00
parent 4e5422ec61
commit c8bb99af60
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 44 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/soapbox/normalizers/soapbox/soapbox_config.ts
View file

@ -6,13 +6,16 @@ import {
} from 'immutable';
import { trimStart } from 'lodash';
import { toTailwind } from 'soapbox/utils/tailwind';
import { generateAccent } from 'soapbox/utils/theme';
import type {
PromoPanelItem,
FooterItem,
CryptoAddress,
} from 'soapbox/types/soapbox';
const DEFAULT_COLORS = ImmutableMap({
const DEFAULT_COLORS = ImmutableMap<string, any>({
gray: ImmutableMap({
50: '#f9fafb',
100: '#f3f4f6',
@ -124,15 +127,44 @@ const normalizeCryptoAddresses = (soapboxConfig: SoapboxConfigMap): SoapboxConfi
return soapboxConfig.set('cryptoAddresses', addresses.map(normalizeCryptoAddress));
};
const normalizeBrandColor = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
const brandColor = soapboxConfig.get('brandColor') || soapboxConfig.getIn(['colors', 'primary', '500']) || '';
return soapboxConfig.set('brandColor', brandColor);
};
const normalizeAccentColor = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
const brandColor = soapboxConfig.get('brandColor');
const accentColor = soapboxConfig.get('accentColor')
|| soapboxConfig.getIn(['colors', 'accent', '500'])
|| (brandColor ? generateAccent(brandColor) : '');
return soapboxConfig.set('accentColor', accentColor);
};
const normalizeColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
const colors = DEFAULT_COLORS.mergeDeep(soapboxConfig.get('colors'));
return soapboxConfig.set('colors', colors);
return toTailwind(soapboxConfig.set('colors', colors));
};
const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMap => {
const colors = soapboxConfig.get('colors');
const missing = {
'bg-shape-1': colors.getIn(['accent', '50']),
'bg-shape-2': colors.getIn(['primary', '500']),
};
return soapboxConfig.set('colors', colors.mergeDeep(missing));
};
export const normalizeSoapboxConfig = (soapboxConfig: Record<string, any>) => {
return SoapboxConfigRecord(
ImmutableMap(fromJS(soapboxConfig)).withMutations(soapboxConfig => {
normalizeBrandColor(soapboxConfig);
normalizeAccentColor(soapboxConfig);
normalizeColors(soapboxConfig);
maybeAddMissingColors(soapboxConfig);
normalizeCryptoAddresses(soapboxConfig);
}),
);

18
app/soapbox/utils/theme.ts
View file

@ -1,8 +1,7 @@
import { hexToRgb } from './colors';
import { toTailwind } from './tailwind';
import type { Map as ImmutableMap } from 'immutable';
import type { Rgb, Hsl, TailwindColorPalette, TailwindColorObject } from 'soapbox/types/colors';
import type { SoapboxConfig } from 'soapbox/types/soapbox';
// Taken from chromatism.js
// https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
@ -69,16 +68,19 @@ export const generateAccent = (brandColor: string): string | null => {
return hslToHex({ h: h - 15, s: 86, l: 44 });
};
const parseShades = (obj: Record<string, any>, color: string, shades: Record<string, any>) => {
const parseShades = (obj: Record<string, any>, color: string, shades: Record<string, any>): void => {
if (!shades) return;
if (typeof shades === 'string') {
const rgb = hexToRgb(shades);
if (!rgb) return obj;
if (!rgb) return;
const { r, g, b } = rgb;
return obj[`--color-${color}`] = `${r} ${g} ${b}`;
obj[`--color-${color}`] = `${r} ${g} ${b}`;
return;
}
return Object.keys(shades).forEach(shade => {
Object.keys(shades).forEach(shade => {
const rgb = hexToRgb(shades[shade]);
if (!rgb) return;
@ -102,6 +104,6 @@ export const colorsToCss = (colors: TailwindColorPalette): string => {
}, '');
};
export const generateThemeCss = (soapboxConfig: ImmutableMap<string, any>): string => {
return colorsToCss(toTailwind(soapboxConfig).get('colors').toJS() as TailwindColorPalette);
export const generateThemeCss = (soapboxConfig: SoapboxConfig): string => {
return colorsToCss(soapboxConfig.colors.toJS() as TailwindColorPalette);
};