Improve color normalization

app/soapbox/normalizers/soapbox/soapbox_config.ts

@@ -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);
     }),
   );

app/soapbox/utils/theme.ts

@@ -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 => {
+export const generateThemeCss = (soapboxConfig: SoapboxConfig): string => {
-  return colorsToCss(toTailwind(soapboxConfig).get('colors').toJS() as TailwindColorPalette);
+  return colorsToCss(soapboxConfig.colors.toJS() as TailwindColorPalette);
 };