Normalize Tailwind colors from SoapboxConfig

app/soapbox/utils/tailwind.ts

@@ -1,6 +1,7 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
 import tintify from 'soapbox/utils/colors';
+import { generateAccent } from 'soapbox/utils/theme';
 
 import type { TailwindColorPalette } from 'soapbox/types/colors';
 
@@ -19,7 +20,7 @@ export const expandPalette = (palette: TailwindColorPalette): TailwindColorPalet
     // Conditionally handle hex color and Tailwind color object
     if (typeof color === 'string' && isHex(color)) {
       result[colorName] = tintify(color);
-    } else if (typeof color === 'object') {
+    } else if (color && typeof color === 'object') {
       result[colorName] = color;
     }
 
@@ -27,18 +28,26 @@ export const expandPalette = (palette: TailwindColorPalette): TailwindColorPalet
   }, {});
 };
 
+// Generate accent color only if brandColor is present
+const maybeGenerateAccentColor = (brandColor: any): string | null => {
+  return isHex(brandColor) ? generateAccent(brandColor) : null;
+};
+
 /** Build a color object from legacy colors */
 export const fromLegacyColors = (soapboxConfig: SoapboxConfig): TailwindColorPalette => {
+  const brandColor = soapboxConfig.get('brandColor');
+  const accentColor = soapboxConfig.get('accentColor');
+
   return expandPalette({
-    primary: soapboxConfig.get('brandColor'),
+    primary: isHex(brandColor) ? brandColor : null,
-    accent: soapboxConfig.get('accentColor'),
+    accent: isHex(accentColor) ? accentColor : maybeGenerateAccentColor(brandColor),
   });
 };
 
 /** Convert Soapbox Config into Tailwind colors */
-export const toTailwind = (soapboxConfig: SoapboxConfig): SoapboxColors => {
+export const toTailwind = (soapboxConfig: SoapboxConfig): SoapboxConfig => {
   const colors: SoapboxColors = ImmutableMap(soapboxConfig.get('colors'));
   const legacyColors: SoapboxColors = ImmutableMap(fromJS(fromLegacyColors(soapboxConfig)));
 
-  return legacyColors.mergeDeep(colors);
+  return soapboxConfig.set('colors', legacyColors.mergeDeep(colors));
 };

app/soapbox/utils/theme.ts

@@ -1,6 +1,8 @@
-import tintify, { hexToRgb } from './colors';
+import { hexToRgb } from './colors';
+import { toTailwind } from './tailwind';
 
-import type { Rgb, Hsl, TailwindColorPalette } from 'soapbox/types/colors';
+import type { Map as ImmutableMap } from 'immutable';
+import type { Rgb, Hsl, TailwindColorPalette, TailwindColorObject } from 'soapbox/types/colors';
 
 // Taken from chromatism.js
 // https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
@@ -59,9 +61,7 @@ function hslToHex(color: Hsl): string {
 }
 
 // Generate accent color from brand color
-const generateAccent = (brandColor: string): string => {
+export const generateAccent = (brandColor: string): string => {
-  console.log(brandColor);
-  console.log(hexToRgb(brandColor));
   const { h } = rgbToHsl(hexToRgb(brandColor));
   return hslToHex({ h: h - 15, s: 86, l: 44 });
 };
@@ -81,7 +81,7 @@ const parseShades = (obj: Record<string, any>, color: string, shades: Record<str
 // Convert colors as CSS variables
 const parseColors = (colors: TailwindColorPalette): TailwindColorPalette => {
   return Object.keys(colors).reduce((obj, color) => {
-    parseShades(obj, color, colors[color]);
+    parseShades(obj, color, colors[color] as TailwindColorObject);
     return obj;
   }, {});
 };
@@ -93,27 +93,6 @@ export const colorsToCss = (colors: TailwindColorPalette): string => {
   }, '');
 };
 
-const legacyColorsToTailwind = (brandColor: string, accentColor: string): TailwindColorPalette => {
+export const generateThemeCss = (soapboxConfig: ImmutableMap<string, any>): string => {
-  return {
+  return colorsToCss(toTailwind(soapboxConfig).get('colors').toJS() as TailwindColorPalette);
-    primary: tintify(brandColor),
-    accent: tintify(accentColor ? accentColor : generateAccent(brandColor)),
-    gray: {
-      50: '#f9fafb',
-      100: '#f3f4f6',
-      200: '#e5e7eb',
-      300: '#d1d5db',
-      400: '#9ca3af',
-      500: '#6b7280',
-      600: '#4b5563',
-      700: '#374151',
-      800: '#1f2937',
-      900: '#111827',
-    },
-    'sea-blue': '#2feecc',
-  };
-};
-
-export const themeColorsToCSS = (brandColor: string, accentColor: string): string => {
-  const colors = legacyColorsToTailwind(brandColor, accentColor);
-  return colorsToCss(colors);
 };