From 1c910248bf382b0fbd77d17eeada0dd240d9f1c3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 7 Mar 2022 16:54:45 -0600
Subject: [PATCH 01/10] Set Tailwind colors with CSS variables

---
 app/styles/themes.scss | 46 +++++++++++++++++++-
 tailwind.config.js     | 97 +++++++++++++++++-------------------------
 2 files changed, 85 insertions(+), 58 deletions(-)

diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index d23808161..112c2abc1 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -26,6 +26,50 @@ Examples:
 
 body,
 .site-preview {
+  // Tailwind color variables
+  --color-gray-50: 249 250 251;
+  --color-gray-100: 243 244 246;
+  --color-gray-200: 229 231 235;
+  --color-gray-300: 209 213 219;
+  --color-gray-400: 156 163 175;
+  --color-gray-500: 107 114 128;
+  --color-gray-600: 75 85 99;
+  --color-gray-700: 55 65 81;
+  --color-gray-800: 31 41 55;
+  --color-gray-900: 17 24 39;
+  --color-primary-50: 238 242 255;
+  --color-primary-100: 224 231 255;
+  --color-primary-200: 199 210 254;
+  --color-primary-300: 165 180 252;
+  --color-primary-400: 129 140 248;
+  --color-primary-500: 99 102 241;
+  --color-primary-600: 84 72 238;
+  --color-primary-700: 67 56 202;
+  --color-primary-800: 55 48 163;
+  --color-primary-900: 49 46 129;
+  --color-success-50: 240 253 244;
+  --color-success-100: 220 252 231;
+  --color-success-200: 187 247 208;
+  --color-success-300: 134 239 172;
+  --color-success-400: 74 222 128;
+  --color-success-500: 34 197 94;
+  --color-success-600: 22 163 74;
+  --color-success-700: 21 128 61;
+  --color-success-800: 22 101 52;
+  --color-success-900: 20 83 45;
+  --color-danger-50: 254 242 242;
+  --color-danger-100: 254 226 226;
+  --color-danger-200: 254 202 202;
+  --color-danger-300: 252 165 165;
+  --color-danger-400: 248 113 113;
+  --color-danger-500: 239 68 68;
+  --color-danger-600: 220 38 38;
+  --color-danger-700: 185 28 28;
+  --color-danger-800: 153 27 27;
+  --color-danger-900: 127 29 29;
+  --color-accent-300: 255 95 135;
+  --color-accent-500: 255 71 117;
+
   // Primary variables
   --brand-color: hsl(var(--brand-color_hsl));
   --accent-color: hsl(var(--accent-color_hsl));
@@ -82,7 +126,7 @@ body,
   --input-border-color: #d1d5db;
 
   // Typography
-  --font-sans: 'Inter', Arial, sans-serif;
+  --font-sans: 'Inter', arial, sans-serif;
   --font-weight-heading: 700;
   --font-weight-body: 400;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9b88abf0d..e697ea757 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,38 @@
+// https://tailwindcss.com/docs/customizing-colors#using-css-variables
+function withOpacityValue(variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`;
+    }
+    return `rgb(var(${variable}) / ${opacityValue})`;
+  };
+}
+
+// Parse list of shades into Tailwind function with CSS variables
+const parseShades = (color, shades) => {
+  return shades.reduce((obj, shade) => {
+    obj[shade] = withOpacityValue(`--color-${color}-${shade}`);
+    return obj;
+  }, {});
+};
+
+// Parse color matrix into Tailwind colors object
+const parseColors = colors => {
+  return Object.keys(colors).reduce((obj, color) => {
+    obj[color] = parseShades(color, colors[color]);
+    return obj;
+  }, {});
+};
+
+// Define color matrix (of available colors)
+const colors = {
+  gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+  accent: [300, 500],
+};
+
 module.exports = {
   content: ['./app/**/*.{html,js,ts,tsx}'],
   darkMode: 'class',
@@ -31,63 +66,11 @@ module.exports = {
           'Noto Color Emoji',
         ],
       },
-      colors: {
-        gray: {
-          50: '#f9fafb',
-          100: '#f3f4f6',
-          200: '#e5e7eb',
-          300: '#d1d5db',
-          400: '#9ca3af',
-          500: '#6b7280',
-          600: '#4b5563',
-          700: '#374151',
-          800: '#1f2937',
-          900: '#111827',
-        },
-        primary: {
-          50: '#eef2ff',
-          100: '#e0e7ff',
-          200: '#c7d2fe',
-          300: '#a5b4fc',
-          400: '#818cf8',
-          500: '#6366f1',
-          600: '#5448ee',
-          700: '#4338ca',
-          800: '#3730a3',
-          900: '#312e81',
-        },
-        success: {
-          50: '#f0fdf4',
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d',
-        },
-        danger: {
-          50: '#fef2f2',
-          100: '#fee2e2',
-          200: '#fecaca',
-          300: '#fca5a5',
-          400: '#f87171',
-          500: '#ef4444',
-          600: '#dc2626',
-          700: '#b91c1c',
-          800: '#991b1b',
-          900: '#7f1d1d',
-        },
-        accent: {
-          300: '#ff5f87',
-          500: '#ff4775',
-        },
-        'gradient-purple': '#b8a3f9',
-        'gradient-blue': '#9bd5ff',
-        'sea-blue': '#2feecc',
-      },
+      colors: Object.assign(parseColors(colors), {
+        'gradient-purple': withOpacityValue('--color-gradient-purple'),
+        'gradient-blue': withOpacityValue('--color-gradient-blue'),
+        'sea-blue': withOpacityValue('--color-sea-blue'),
+      }),
     },
   },
   plugins: [

From 0938612678ba83c73764dc336f282d6debe45728 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 7 Mar 2022 17:19:54 -0600
Subject: [PATCH 02/10] Use colors from soapbox.json at runtime

---
 app/soapbox/actions/soapbox.js    |  1 +
 app/soapbox/containers/soapbox.js |  6 ++++-
 app/soapbox/utils/theme.js        | 26 ++++++++++++++++++
 app/styles/themes.scss            | 44 -------------------------------
 4 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index 91e1a26f2..ac8749221 100644
--- a/app/soapbox/actions/soapbox.js
+++ b/app/soapbox/actions/soapbox.js
@@ -41,6 +41,7 @@ export const makeDefaultConfig = features => {
     banner: '',
     brandColor: '', // Empty
     accentColor: '',
+    colors: ImmutableMap(),
     customCss: ImmutableList(),
     promoPanel: ImmutableMap({
       items: ImmutableList(),
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index a86573be7..c702ea12c 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -25,6 +25,7 @@ import { createGlobals } from 'soapbox/globals';
 import messages from 'soapbox/locales/messages';
 import { makeGetAccount } from 'soapbox/selectors';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
+import { colorsToCss } from 'soapbox/utils/theme';
 
 import { INTRODUCTION_VERSION } from '../actions/onboarding';
 import { preload } from '../actions/preload';
@@ -83,6 +84,7 @@ const mapStateToProps = (state) => {
     dyslexicFont: settings.get('dyslexicFont'),
     demetricator: settings.get('demetricator'),
     locale: validLocale(locale) ? locale : 'en',
+    themeCss: colorsToCss(soapboxConfig.get('colors').toJS()),
     brandColor: soapboxConfig.get('brandColor'),
     themeMode: settings.get('themeMode'),
     singleUserMode,
@@ -103,6 +105,7 @@ class SoapboxMount extends React.PureComponent {
     dyslexicFont: PropTypes.bool,
     demetricator: PropTypes.bool,
     locale: PropTypes.string.isRequired,
+    themeCss: PropTypes.string,
     themeMode: PropTypes.string,
     brandColor: PropTypes.string,
     dispatch: PropTypes.func,
@@ -139,7 +142,7 @@ class SoapboxMount extends React.PureComponent {
   }
 
   render() {
-    const { me, account, instanceLoaded, locale, singleUserMode } = this.props;
+    const { me, account, instanceLoaded, themeCss, locale, singleUserMode } = this.props;
     if (me === null) return null;
     if (me && !account) return null;
     if (!instanceLoaded) return null;
@@ -169,6 +172,7 @@ class SoapboxMount extends React.PureComponent {
               <Helmet>
                 {/* <html lang='en' className={this.props.themeMode} /> */}
                 <body className={bodyClass} />
+                {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
                 <meta name='theme-color' content={this.props.brandColor} />
               </Helmet>
               <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
index 1b3c85dfe..0f3d63b4f 100644
--- a/app/soapbox/utils/theme.js
+++ b/app/soapbox/utils/theme.js
@@ -65,6 +65,32 @@ const rgbToHsl = value => {
   };
 };
 
+const parseShades = (obj, color, shades) => {
+  if (typeof shades === 'string') {
+    const { r, g, b } = hexToRgb(shades);
+    return obj[`--color-${color}`] = `${r} ${g} ${b}`;
+  }
+
+  return Object.keys(shades).forEach(shade => {
+    const { r, g, b } = hexToRgb(shades[shade]);
+    obj[`--color-${color}-${shade}`] = `${r} ${g} ${b}`;
+  });
+};
+
+const parseColors = colors => {
+  return Object.keys(colors).reduce((obj, color) => {
+    parseShades(obj, color, colors[color]);
+    return obj;
+  }, {});
+};
+
+export const colorsToCss = colors => {
+  const parsed = parseColors(colors);
+  return Object.keys(parsed).reduce((css, variable) => {
+    return css + `${variable}:${parsed[variable]};`;
+  }, '');
+};
+
 export const brandColorToThemeData = brandColor => {
   const { h, s, l } = rgbToHsl(hexToRgb(brandColor));
   return ImmutableMap({
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 112c2abc1..97a9b5f95 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -26,50 +26,6 @@ Examples:
 
 body,
 .site-preview {
-  // Tailwind color variables
-  --color-gray-50: 249 250 251;
-  --color-gray-100: 243 244 246;
-  --color-gray-200: 229 231 235;
-  --color-gray-300: 209 213 219;
-  --color-gray-400: 156 163 175;
-  --color-gray-500: 107 114 128;
-  --color-gray-600: 75 85 99;
-  --color-gray-700: 55 65 81;
-  --color-gray-800: 31 41 55;
-  --color-gray-900: 17 24 39;
-  --color-primary-50: 238 242 255;
-  --color-primary-100: 224 231 255;
-  --color-primary-200: 199 210 254;
-  --color-primary-300: 165 180 252;
-  --color-primary-400: 129 140 248;
-  --color-primary-500: 99 102 241;
-  --color-primary-600: 84 72 238;
-  --color-primary-700: 67 56 202;
-  --color-primary-800: 55 48 163;
-  --color-primary-900: 49 46 129;
-  --color-success-50: 240 253 244;
-  --color-success-100: 220 252 231;
-  --color-success-200: 187 247 208;
-  --color-success-300: 134 239 172;
-  --color-success-400: 74 222 128;
-  --color-success-500: 34 197 94;
-  --color-success-600: 22 163 74;
-  --color-success-700: 21 128 61;
-  --color-success-800: 22 101 52;
-  --color-success-900: 20 83 45;
-  --color-danger-50: 254 242 242;
-  --color-danger-100: 254 226 226;
-  --color-danger-200: 254 202 202;
-  --color-danger-300: 252 165 165;
-  --color-danger-400: 248 113 113;
-  --color-danger-500: 239 68 68;
-  --color-danger-600: 220 38 38;
-  --color-danger-700: 185 28 28;
-  --color-danger-800: 153 27 27;
-  --color-danger-900: 127 29 29;
-  --color-accent-300: 255 95 135;
-  --color-accent-500: 255 71 117;
-
   // Primary variables
   --brand-color: hsl(var(--brand-color_hsl));
   --accent-color: hsl(var(--accent-color_hsl));

From 18bad4a5ab9e886a2c45c28480cbdea0b637d0d4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 21 Mar 2022 18:57:23 -0500
Subject: [PATCH 03/10] Typescript: utils/theme.ts

---
 app/soapbox/utils/{theme.js => theme.ts} | 26 ++++++++++++++----------
 1 file changed, 15 insertions(+), 11 deletions(-)
 rename app/soapbox/utils/{theme.js => theme.ts} (73%)

diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.ts
similarity index 73%
rename from app/soapbox/utils/theme.js
rename to app/soapbox/utils/theme.ts
index 0f3d63b4f..e052a41dc 100644
--- a/app/soapbox/utils/theme.js
+++ b/app/soapbox/utils/theme.ts
@@ -1,15 +1,18 @@
 import { Map as ImmutableMap } from 'immutable';
 
-export const generateThemeCss = (brandColor, accentColor) => {
+type RGB = { r: number, g: number, b: number };
+type HSL = { h: number, s: number, l: number };
+
+export const generateThemeCss = (brandColor: string, accentColor: string): string => {
   if (!brandColor) return null;
   return themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
 };
 
 // https://stackoverflow.com/a/5624139
-function hexToRgb(hex) {
+function hexToRgb(hex: string): RGB {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, (m, r, g, b) => (
+  hex = hex.replace(shorthandRegex, (_m, r, g, b) => (
     r + r + g + g + b + b
   ));
 
@@ -28,7 +31,7 @@ function hexToRgb(hex) {
 
 // Taken from chromatism.js
 // https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
-const rgbToHsl = value => {
+const rgbToHsl = (value: RGB): HSL => {
   const r = value.r / 255;
   const g = value.g / 255;
   const b = value.b / 255;
@@ -65,7 +68,7 @@ const rgbToHsl = value => {
   };
 };
 
-const parseShades = (obj, color, shades) => {
+const parseShades = (obj: Record<string, any>, color: string, shades: Record<string, any>) => {
   if (typeof shades === 'string') {
     const { r, g, b } = hexToRgb(shades);
     return obj[`--color-${color}`] = `${r} ${g} ${b}`;
@@ -77,21 +80,21 @@ const parseShades = (obj, color, shades) => {
   });
 };
 
-const parseColors = colors => {
+const parseColors = (colors: Record<string, any>): Record<string, any> => {
   return Object.keys(colors).reduce((obj, color) => {
     parseShades(obj, color, colors[color]);
     return obj;
   }, {});
 };
 
-export const colorsToCss = colors => {
+export const colorsToCss = (colors: Record<string, any>): string => {
   const parsed = parseColors(colors);
   return Object.keys(parsed).reduce((css, variable) => {
     return css + `${variable}:${parsed[variable]};`;
   }, '');
 };
 
-export const brandColorToThemeData = brandColor => {
+export const brandColorToThemeData = (brandColor: string): ImmutableMap<string, any> => {
   const { h, s, l } = rgbToHsl(hexToRgb(brandColor));
   return ImmutableMap({
     'brand-color_h': h,
@@ -100,7 +103,7 @@ export const brandColorToThemeData = brandColor => {
   });
 };
 
-export const accentColorToThemeData = (brandColor, accentColor) => {
+export const accentColorToThemeData = (brandColor: string, accentColor: string): ImmutableMap<string, any> => {
   if (accentColor) {
     const { h, s, l } = rgbToHsl(hexToRgb(accentColor));
 
@@ -119,10 +122,11 @@ export const accentColorToThemeData = (brandColor, accentColor) => {
   });
 };
 
-export const themeDataToCss = themeData => (
+export const themeDataToCss = (themeData: ImmutableMap<string, any>): string => (
   themeData
     .entrySeq()
     .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
 );
 
-export const themeColorsToCSS = (brandColor, accentColor) => themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
+export const themeColorsToCSS = (brandColor: string, accentColor: string): string =>
+  themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));

From a42ea0961aeef51e8427abb19f6b2dec8f27fcef Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 22 Mar 2022 12:37:57 -0500
Subject: [PATCH 04/10] Generate Tailwind colors from brandColor/accentColor

---
 app/soapbox/containers/soapbox.js             |   4 +-
 app/soapbox/features/ui/components/navbar.tsx |  12 +-
 app/soapbox/types/colors.ts                   |  10 ++
 app/soapbox/utils/__tests__/colors-test.js    |  22 ++++
 app/soapbox/utils/colors.ts                   | 123 ++++++++++++++++++
 app/soapbox/utils/theme.ts                    | 104 ++++++---------
 6 files changed, 203 insertions(+), 72 deletions(-)
 create mode 100644 app/soapbox/types/colors.ts
 create mode 100644 app/soapbox/utils/__tests__/colors-test.js
 create mode 100644 app/soapbox/utils/colors.ts

diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index c702ea12c..aad96badb 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -25,7 +25,7 @@ import { createGlobals } from 'soapbox/globals';
 import messages from 'soapbox/locales/messages';
 import { makeGetAccount } from 'soapbox/selectors';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
-import { colorsToCss } from 'soapbox/utils/theme';
+import { themeColorsToCSS } from 'soapbox/utils/theme';
 
 import { INTRODUCTION_VERSION } from '../actions/onboarding';
 import { preload } from '../actions/preload';
@@ -84,7 +84,7 @@ const mapStateToProps = (state) => {
     dyslexicFont: settings.get('dyslexicFont'),
     demetricator: settings.get('demetricator'),
     locale: validLocale(locale) ? locale : 'en',
-    themeCss: colorsToCss(soapboxConfig.get('colors').toJS()),
+    themeCss: themeColorsToCSS(soapboxConfig.get('brandColor') || '#0482d8', soapboxConfig.get('accentColor', '')),
     brandColor: soapboxConfig.get('brandColor'),
     themeMode: settings.get('themeMode'),
     singleUserMode,
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 2f6ffe8df..d9198ecc4 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -33,11 +33,13 @@ const Navbar = () => {
     <nav className='bg-white shadow z-50 sticky top-0' ref={node}>
       <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex justify-between h-12 lg:h-16'>
-          <div className='absolute inset-y-0 left-0 flex items-center lg:hidden'>
-            <button onClick={onOpenSidebar}>
-              <Avatar src={account.avatar} size={34} />
-            </button>
-          </div>
+          {account && (
+            <div className='absolute inset-y-0 left-0 flex items-center lg:hidden'>
+              <button onClick={onOpenSidebar}>
+                <Avatar src={account.avatar} size={34} />
+              </button>
+            </div>
+          )}
 
           <div
             className={classNames({
diff --git a/app/soapbox/types/colors.ts b/app/soapbox/types/colors.ts
new file mode 100644
index 000000000..01f97eba0
--- /dev/null
+++ b/app/soapbox/types/colors.ts
@@ -0,0 +1,10 @@
+export type Rgb = { r: number, g: number, b: number };
+export type Hsl = { h: number, s: number, l: number };
+
+export type TailwindColorObject = {
+  [key: number]: string;
+};
+
+export type TailwindColorPalette = {
+  [key: string]: TailwindColorObject,
+}
diff --git a/app/soapbox/utils/__tests__/colors-test.js b/app/soapbox/utils/__tests__/colors-test.js
new file mode 100644
index 000000000..3e444620a
--- /dev/null
+++ b/app/soapbox/utils/__tests__/colors-test.js
@@ -0,0 +1,22 @@
+import tintify from '../colors';
+
+const AZURE = '#0482d8';
+
+describe('tintify()', () => {
+  it('generates tints from a base color', () => {
+    const result = tintify(AZURE);
+
+    expect(result).toEqual({
+      '100': '#e6f3fb',
+      '200': '#c0e0f5',
+      '300': '#9bcdef',
+      '400': '#4fa8e4',
+      '50': '#f2f9fd',
+      '500': '#0482d8',
+      '600': '#0475c2',
+      '700': '#0362a2',
+      '800': '#024e82',
+      '900': '#02406a',
+    });
+  });
+});
diff --git a/app/soapbox/utils/colors.ts b/app/soapbox/utils/colors.ts
new file mode 100644
index 000000000..c20c98830
--- /dev/null
+++ b/app/soapbox/utils/colors.ts
@@ -0,0 +1,123 @@
+/*
+MIT License
+
+Copyright (c) 2022 Javis V. Pérez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+// Adapted from:
+// https://github.com/javisperez/tailwindcolorshades/blob/master/src/composables/colors.ts
+
+import type { Rgb, TailwindColorObject } from 'soapbox/types/colors';
+
+export function hexToRgb(hex: string): Rgb | null {
+  const sanitizedHex = hex.replace(/##/g, '#');
+  const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
+    sanitizedHex,
+  );
+
+  if (!colorParts) {
+    return null;
+  }
+
+  const [, r, g, b] = colorParts;
+
+  return {
+    r: parseInt(r, 16),
+    g: parseInt(g, 16),
+    b: parseInt(b, 16),
+  } as Rgb;
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+export function getTextColor(color: string): '#FFF' | '#333' {
+  const rgbColor = hexToRgb(color);
+
+  if (!rgbColor) {
+    return '#333';
+  }
+
+  const { r, g, b } = rgbColor;
+  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+  return luma < 120 ? '#FFF' : '#333';
+}
+
+function lighten(hex: string, intensity: number): string {
+  const color = hexToRgb(`#${hex}`);
+
+  if (!color) {
+    return '';
+  }
+
+  const r = Math.round(color.r + (255 - color.r) * intensity);
+  const g = Math.round(color.g + (255 - color.g) * intensity);
+  const b = Math.round(color.b + (255 - color.b) * intensity);
+
+  return rgbToHex(r, g, b);
+}
+
+function darken(hex: string, intensity: number): string {
+  const color = hexToRgb(hex);
+
+  if (!color) {
+    return '';
+  }
+
+  const r = Math.round(color.r * intensity);
+  const g = Math.round(color.g * intensity);
+  const b = Math.round(color.b * intensity);
+
+  return rgbToHex(r, g, b);
+}
+
+export default function(baseColor: string): TailwindColorObject {
+  const response: TailwindColorObject = {
+    500: `#${baseColor}`.replace(/##/g, '#'),
+  };
+
+  const intensityMap: {
+    [key: number]: number;
+  } = {
+    50: 0.95,
+    100: 0.9,
+    200: 0.75,
+    300: 0.6,
+    400: 0.3,
+    600: 0.9,
+    700: 0.75,
+    800: 0.6,
+    900: 0.49,
+  };
+
+  [50, 100, 200, 300, 400].forEach(level => {
+    response[level] = lighten(baseColor, intensityMap[level]);
+  });
+
+  [600, 700, 800, 900].forEach(level => {
+    response[level] = darken(baseColor, intensityMap[level]);
+  });
+
+  return response;
+}
diff --git a/app/soapbox/utils/theme.ts b/app/soapbox/utils/theme.ts
index e052a41dc..3527199c2 100644
--- a/app/soapbox/utils/theme.ts
+++ b/app/soapbox/utils/theme.ts
@@ -1,37 +1,10 @@
-import { Map as ImmutableMap } from 'immutable';
+import tintify, { hexToRgb } from './colors';
 
-type RGB = { r: number, g: number, b: number };
-type HSL = { h: number, s: number, l: number };
-
-export const generateThemeCss = (brandColor: string, accentColor: string): string => {
-  if (!brandColor) return null;
-  return themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));
-};
-
-// https://stackoverflow.com/a/5624139
-function hexToRgb(hex: string): RGB {
-  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, (_m, r, g, b) => (
-    r + r + g + g + b + b
-  ));
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16),
-  } : {
-    // fall back to Azure
-    r: 4,
-    g: 130,
-    b: 216,
-  };
-}
+import type { Rgb, Hsl, TailwindColorPalette } from 'soapbox/types/colors';
 
 // Taken from chromatism.js
 // https://github.com/graypegg/chromatism/blob/master/src/conversions/rgb.js
-const rgbToHsl = (value: RGB): HSL => {
+const rgbToHsl = (value: Rgb): Hsl => {
   const r = value.r / 255;
   const g = value.g / 255;
   const b = value.b / 255;
@@ -68,6 +41,31 @@ const rgbToHsl = (value: RGB): HSL => {
   };
 };
 
+// https://stackoverflow.com/a/44134328
+function hslToHex(color: Hsl): string {
+  const { h, s } = color;
+  let { l } = color;
+
+  l /= 100;
+  const a = s * Math.min(l, 1 - l) / 100;
+
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
+  };
+
+  return `#${f(0)}${f(8)}${f(4)}`;
+}
+
+// Generate accent color from brand color
+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 });
+};
+
 const parseShades = (obj: Record<string, any>, color: string, shades: Record<string, any>) => {
   if (typeof shades === 'string') {
     const { r, g, b } = hexToRgb(shades);
@@ -80,53 +78,29 @@ const parseShades = (obj: Record<string, any>, color: string, shades: Record<str
   });
 };
 
-const parseColors = (colors: Record<string, any>): Record<string, any> => {
+// Convert colors as CSS variables
+const parseColors = (colors: TailwindColorPalette): TailwindColorPalette => {
   return Object.keys(colors).reduce((obj, color) => {
     parseShades(obj, color, colors[color]);
     return obj;
   }, {});
 };
 
-export const colorsToCss = (colors: Record<string, any>): string => {
+export const colorsToCss = (colors: TailwindColorPalette): string => {
   const parsed = parseColors(colors);
   return Object.keys(parsed).reduce((css, variable) => {
     return css + `${variable}:${parsed[variable]};`;
   }, '');
 };
 
-export const brandColorToThemeData = (brandColor: string): ImmutableMap<string, any> => {
-  const { h, s, l } = rgbToHsl(hexToRgb(brandColor));
-  return ImmutableMap({
-    'brand-color_h': h,
-    'brand-color_s': `${s}%`,
-    'brand-color_l': `${l}%`,
-  });
+const legacyColorsToTailwind = (brandColor: string, accentColor: string): TailwindColorPalette => {
+  return {
+    primary: tintify(brandColor),
+    accent: tintify(accentColor ? accentColor : generateAccent(brandColor)),
+  };
 };
 
-export const accentColorToThemeData = (brandColor: string, accentColor: string): ImmutableMap<string, any> => {
-  if (accentColor) {
-    const { h, s, l } = rgbToHsl(hexToRgb(accentColor));
-
-    return ImmutableMap({
-      'accent-color_h': h,
-      'accent-color_s': `${s}%`,
-      'accent-color_l': `${l}%`,
-    });
-  }
-
-  const { h } = rgbToHsl(hexToRgb(brandColor));
-  return ImmutableMap({
-    'accent-color_h': h - 15,
-    'accent-color_s': '86%',
-    'accent-color_l': '44%',
-  });
+export const themeColorsToCSS = (brandColor: string, accentColor: string): string => {
+  const colors = legacyColorsToTailwind(brandColor, accentColor);
+  return colorsToCss(colors);
 };
-
-export const themeDataToCss = (themeData: ImmutableMap<string, any>): string => (
-  themeData
-    .entrySeq()
-    .reduce((acc, cur) => acc + `--${cur[0]}:${cur[1]};`, '')
-);
-
-export const themeColorsToCSS = (brandColor: string, accentColor: string): string =>
-  themeDataToCss(brandColorToThemeData(brandColor).merge(accentColorToThemeData(brandColor, accentColor)));

From 8f85fd01d50aad82a998ce95a889ff6910be22df Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 22 Mar 2022 16:25:52 -0500
Subject: [PATCH 05/10] Make bg-shape colors configurable

---
 app/images/bg-shape.svg                       |  1 -
 .../ui/components/background_shapes.js        | 22 +++++++++++++++++--
 app/soapbox/utils/theme.ts                    | 13 +++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)
 delete mode 100644 app/images/bg-shape.svg

diff --git a/app/images/bg-shape.svg b/app/images/bg-shape.svg
deleted file mode 100644
index aa0132f3d..000000000
--- a/app/images/bg-shape.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1754" height="1336" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter x="-18.1%" y="-15.3%" width="136.3%" height="130.7%" filterUnits="objectBoundingBox" id="c"><feGaussianBlur stdDeviation="50" in="SourceGraphic"/></filter><filter x="-16.5%" y="-11.7%" width="133%" height="123.3%" filterUnits="objectBoundingBox" id="d"><feGaussianBlur stdDeviation="50" in="SourceGraphic"/></filter><path id="a" d="M0 0h1754v1336H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)"><path d="M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z" fill="#E7F5FF" fill-rule="nonzero" filter="url(#c)" transform="translate(309.54 -367.538)"/><path d="M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z" fill="#5448EE" fill-rule="nonzero" filter="url(#d)" transform="translate(309.54 -141.056)" opacity=".1"/></g></g></svg>
\ No newline at end of file
diff --git a/app/soapbox/features/ui/components/background_shapes.js b/app/soapbox/features/ui/components/background_shapes.js
index 0d73976e9..c8953218c 100644
--- a/app/soapbox/features/ui/components/background_shapes.js
+++ b/app/soapbox/features/ui/components/background_shapes.js
@@ -1,10 +1,28 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
 export default () => (
   <div className='fixed top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none'>
     <div className='flex-none flex justify-center'>
-      <InlineSVG src={require('../../../../images/bg-shape.svg')} className='flex-none max-w-none' />
+      <svg width='1754' height='1336' xmlns='http://www.w3.org/2000/svg'>
+        <defs>
+          <filter x='-18.1%' y='-15.3%' width='136.3%' height='130.7%' filterUnits='objectBoundingBox' id='c'>
+            <feGaussianBlur stdDeviation='50' in='SourceGraphic' />
+          </filter>
+          <filter x='-16.5%' y='-11.7%' width='133%' height='123.3%' filterUnits='objectBoundingBox' id='d'>
+            <feGaussianBlur stdDeviation='50' in='SourceGraphic' />
+          </filter>
+          <path id='a' d='M0 0h1754v1336H0z' />
+        </defs>
+        <g fill='none' fill-rule='evenodd'>
+          <mask id='b' fill='#fff'>
+            <use xlinkHref='#a' />
+          </mask>
+          <g mask='url(#b)'>
+            <path className='fill-primary-100' d='M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z' fill-rule='nonzero' filter='url(#c)' transform='translate(309.54 -367.538)' />
+            <path className='fill-accent-300' d='M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z' fill-rule='nonzero' filter='url(#d)' transform='translate(309.54 -141.056)' opacity='.1' />
+          </g>
+        </g>
+      </svg>
     </div>
   </div>
 );
diff --git a/app/soapbox/utils/theme.ts b/app/soapbox/utils/theme.ts
index 3527199c2..b12be1abb 100644
--- a/app/soapbox/utils/theme.ts
+++ b/app/soapbox/utils/theme.ts
@@ -97,6 +97,19 @@ const legacyColorsToTailwind = (brandColor: string, accentColor: string): Tailwi
   return {
     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',
   };
 };
 

From 7fc4950387c8c98357dc8ad7c4bdd0849300c24f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 14:28:51 -0500
Subject: [PATCH 06/10] utils/tailwind.ts: Tailwind/SoapboxConfig conversion
 functions

---
 app/soapbox/types/colors.ts                  |   2 +-
 app/soapbox/utils/__tests__/tailwind-test.js | 189 +++++++++++++++++++
 app/soapbox/utils/tailwind.ts                |  44 +++++
 3 files changed, 234 insertions(+), 1 deletion(-)
 create mode 100644 app/soapbox/utils/__tests__/tailwind-test.js
 create mode 100644 app/soapbox/utils/tailwind.ts

diff --git a/app/soapbox/types/colors.ts b/app/soapbox/types/colors.ts
index 01f97eba0..75d9a3eb6 100644
--- a/app/soapbox/types/colors.ts
+++ b/app/soapbox/types/colors.ts
@@ -6,5 +6,5 @@ export type TailwindColorObject = {
 };
 
 export type TailwindColorPalette = {
-  [key: string]: TailwindColorObject,
+  [key: string]: TailwindColorObject | string,
 }
diff --git a/app/soapbox/utils/__tests__/tailwind-test.js b/app/soapbox/utils/__tests__/tailwind-test.js
new file mode 100644
index 000000000..7a791e408
--- /dev/null
+++ b/app/soapbox/utils/__tests__/tailwind-test.js
@@ -0,0 +1,189 @@
+import { Map as ImmutableMap } from 'immutable';
+
+import { toTailwind, fromLegacyColors, expandPalette } from '../tailwind';
+
+describe('toTailwind()', () => {
+  it('converts brandColor into a Tailwind color palette', () => {
+    const soapboxConfig = ImmutableMap({ brandColor: '#0482d8' });
+
+    const expected = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#9bcdef',
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+    };
+
+    const result = toTailwind(soapboxConfig);
+    expect(result.toJS()).toMatchObject(expected);
+  });
+
+  it('prefers Tailwind colors object over legacy colors', () => {
+    const soapboxConfig = ImmutableMap({
+      brandColor: '#0482d8',
+      colors: ImmutableMap({
+        primary: ImmutableMap({
+          300: '#ff0000',
+        }),
+      }),
+    });
+
+    const expected = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#ff0000', // <--
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+    };
+
+    const result = toTailwind(soapboxConfig);
+    expect(result.toJS()).toMatchObject(expected);
+  });
+});
+
+describe('fromLegacyColors()', () => {
+  it('converts only brandColor', () => {
+    const soapboxConfig = ImmutableMap({ brandColor: '#0482d8' });
+
+    const expected = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#9bcdef',
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+    };
+
+    const result = fromLegacyColors(soapboxConfig);
+    expect(result).toEqual(expected);
+  });
+
+  it('converts both legacy colors', () => {
+    const soapboxConfig = ImmutableMap({
+      brandColor: '#0482d8',
+      accentColor: '#2bd110',
+    });
+
+    const expected = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#9bcdef',
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+      accent: {
+        50: '#f4fdf3',
+        100: '#eafae7',
+        200: '#caf4c3',
+        300: '#aaed9f',
+        400: '#6bdf58',
+        500: '#2bd110',
+        600: '#27bc0e',
+        700: '#209d0c',
+        800: '#1a7d0a',
+        900: '#156608',
+      },
+    };
+
+    const result = fromLegacyColors(soapboxConfig);
+    expect(result).toEqual(expected);
+  });
+});
+
+describe('expandPalette()', () => {
+  it('expands one color', () => {
+    const palette = { primary: '#0482d8' };
+
+    const expected = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#9bcdef',
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+    };
+
+    const result = expandPalette(palette);
+    expect(result).toEqual(expected);
+  });
+
+  it('expands mixed palette', () => {
+    const palette = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#9bcdef',
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+      accent: '#2bd110',
+    };
+
+    const expected = {
+      primary: {
+        50: '#f2f9fd',
+        100: '#e6f3fb',
+        200: '#c0e0f5',
+        300: '#9bcdef',
+        400: '#4fa8e4',
+        500: '#0482d8',
+        600: '#0475c2',
+        700: '#0362a2',
+        800: '#024e82',
+        900: '#02406a',
+      },
+      accent: {
+        50: '#f4fdf3',
+        100: '#eafae7',
+        200: '#caf4c3',
+        300: '#aaed9f',
+        400: '#6bdf58',
+        500: '#2bd110',
+        600: '#27bc0e',
+        700: '#209d0c',
+        800: '#1a7d0a',
+        900: '#156608',
+      },
+    };
+
+    const result = expandPalette(palette);
+    expect(result).toEqual(expected);
+  });
+});
diff --git a/app/soapbox/utils/tailwind.ts b/app/soapbox/utils/tailwind.ts
new file mode 100644
index 000000000..798f1cfe9
--- /dev/null
+++ b/app/soapbox/utils/tailwind.ts
@@ -0,0 +1,44 @@
+import { Map as ImmutableMap, fromJS } from 'immutable';
+
+import tintify from 'soapbox/utils/colors';
+
+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);
+    } else if (typeof color === 'object') {
+      result[colorName] = color;
+    }
+
+    return result;
+  }, {});
+};
+
+/** Build a color object from legacy colors */
+export const fromLegacyColors = (soapboxConfig: SoapboxConfig): TailwindColorPalette => {
+  return expandPalette({
+    primary: soapboxConfig.get('brandColor'),
+    accent: soapboxConfig.get('accentColor'),
+  });
+};
+
+/** Convert Soapbox Config into Tailwind colors */
+export const toTailwind = (soapboxConfig: SoapboxConfig): SoapboxColors => {
+  const colors: SoapboxColors = ImmutableMap(soapboxConfig.get('colors'));
+  const legacyColors: SoapboxColors = ImmutableMap(fromJS(fromLegacyColors(soapboxConfig)));
+
+  return legacyColors.mergeDeep(colors);
+};

From fff580f053f4602e20b17d20359b2d89fe657acc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 15:31:19 -0500
Subject: [PATCH 07/10] Normalize Tailwind colors from SoapboxConfig

---
 app/soapbox/actions/soapbox.js                | 45 +++++++++++-
 app/soapbox/containers/soapbox.js             |  4 +-
 .../soapbox_config/components/site_preview.js |  4 +-
 app/soapbox/utils/__tests__/tailwind-test.js  | 70 +++++++++++++------
 app/soapbox/utils/tailwind.ts                 | 19 +++--
 app/soapbox/utils/theme.ts                    | 37 +++-------
 6 files changed, 117 insertions(+), 62 deletions(-)

diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index ac8749221..2871e2aae 100644
--- a/app/soapbox/actions/soapbox.js
+++ b/app/soapbox/actions/soapbox.js
@@ -41,7 +41,47 @@ export const makeDefaultConfig = features => {
     banner: '',
     brandColor: '', // Empty
     accentColor: '',
-    colors: ImmutableMap(),
+    colors: ImmutableMap({
+      gray: ImmutableMap({
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+      }),
+      success: ImmutableMap({
+        50: '#f0fdf4',
+        100: '#dcfce7',
+        200: '#bbf7d0',
+        300: '#86efac',
+        400: '#4ade80',
+        500: '#22c55e',
+        600: '#16a34a',
+        700: '#15803d',
+        800: '#166534',
+        900: '#14532d',
+      }),
+      danger: ImmutableMap({
+        50: '#fef2f2',
+        100: '#fee2e2',
+        200: '#fecaca',
+        300: '#fca5a5',
+        400: '#f87171',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+        800: '#991b1b',
+        900: '#7f1d1d',
+      }),
+      'gradient-purple': '#b8a3f9',
+      'gradient-blue': '#9bd5ff',
+      'sea-blue': '#2feecc',
+    }),
     customCss: ImmutableList(),
     promoPanel: ImmutableMap({
       items: ImmutableList(),
@@ -73,7 +113,8 @@ export const getSoapboxConfig = createSelector([
   state => state.get('soapbox'),
   state => getFeatures(state.get('instance')),
 ], (soapbox, features) => {
-  return makeDefaultConfig(features).merge(soapbox);
+  const defaultConfig = makeDefaultConfig(features);
+  return soapbox.mergeDeepWith((o, n) => o || n, defaultConfig);
 });
 
 export function rememberSoapboxConfig(host) {
diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 3571a687d..4dcfdafb7 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -25,7 +25,7 @@ import { createGlobals } from 'soapbox/globals';
 import messages from 'soapbox/locales/messages';
 import { makeGetAccount } from 'soapbox/selectors';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
-import { themeColorsToCSS } from 'soapbox/utils/theme';
+import { generateThemeCss } from 'soapbox/utils/theme';
 
 import { INTRODUCTION_VERSION } from '../actions/onboarding';
 import { preload } from '../actions/preload';
@@ -84,7 +84,7 @@ const mapStateToProps = (state) => {
     dyslexicFont: settings.get('dyslexicFont'),
     demetricator: settings.get('demetricator'),
     locale: validLocale(locale) ? locale : 'en',
-    themeCss: themeColorsToCSS(soapboxConfig.get('brandColor') || '#0482d8', soapboxConfig.get('accentColor', '')),
+    themeCss: generateThemeCss(soapboxConfig),
     brandColor: soapboxConfig.get('brandColor'),
     themeMode: settings.get('themeMode'),
     singleUserMode,
diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js
index 47a4c9ae1..b4506dd81 100644
--- a/app/soapbox/features/soapbox_config/components/site_preview.js
+++ b/app/soapbox/features/soapbox_config/components/site_preview.js
@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { defaultSettings } from 'soapbox/actions/settings';
-import { themeColorsToCSS } from 'soapbox/utils/theme';
+import { generateThemeCss } from 'soapbox/utils/theme';
 
 export default function SitePreview({ soapbox }) {
 
@@ -18,7 +18,7 @@ export default function SitePreview({ soapbox }) {
 
   return (
     <div className={bodyClass}>
-      <style>{`.site-preview {${themeColorsToCSS(soapbox.get('brandColor'), soapbox.get('accentColor'))}}`}</style>
+      <style>{`.site-preview {${generateThemeCss(soapbox)}}`}</style>
       <div className='app-holder'>
         <div>
           <div className='ui'>
diff --git a/app/soapbox/utils/__tests__/tailwind-test.js b/app/soapbox/utils/__tests__/tailwind-test.js
index 7a791e408..93f928b73 100644
--- a/app/soapbox/utils/__tests__/tailwind-test.js
+++ b/app/soapbox/utils/__tests__/tailwind-test.js
@@ -3,21 +3,31 @@ import { Map as ImmutableMap } from 'immutable';
 import { toTailwind, fromLegacyColors, expandPalette } from '../tailwind';
 
 describe('toTailwind()', () => {
+  it('handles empty Soapbox config', () => {
+    const soapboxConfig = ImmutableMap();
+    const result = toTailwind(soapboxConfig);
+    const expected = ImmutableMap({ colors: ImmutableMap() });
+    expect(result).toEqual(expected);
+  });
+
   it('converts brandColor into a Tailwind color palette', () => {
     const soapboxConfig = ImmutableMap({ brandColor: '#0482d8' });
 
     const expected = {
-      primary: {
-        50: '#f2f9fd',
-        100: '#e6f3fb',
-        200: '#c0e0f5',
-        300: '#9bcdef',
-        400: '#4fa8e4',
-        500: '#0482d8',
-        600: '#0475c2',
-        700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+      brandColor: '#0482d8',
+      colors: {
+        primary: {
+          50: '#f2f9fd',
+          100: '#e6f3fb',
+          200: '#c0e0f5',
+          300: '#9bcdef',
+          400: '#4fa8e4',
+          500: '#0482d8',
+          600: '#0475c2',
+          700: '#0362a2',
+          800: '#024e82',
+          900: '#02406a',
+        },
       },
     };
 
@@ -36,17 +46,20 @@ describe('toTailwind()', () => {
     });
 
     const expected = {
-      primary: {
-        50: '#f2f9fd',
-        100: '#e6f3fb',
-        200: '#c0e0f5',
-        300: '#ff0000', // <--
-        400: '#4fa8e4',
-        500: '#0482d8',
-        600: '#0475c2',
-        700: '#0362a2',
-        800: '#024e82',
-        900: '#02406a',
+      brandColor: '#0482d8',
+      colors: {
+        primary: {
+          50: '#f2f9fd',
+          100: '#e6f3fb',
+          200: '#c0e0f5',
+          300: '#ff0000', // <--
+          400: '#4fa8e4',
+          500: '#0482d8',
+          600: '#0475c2',
+          700: '#0362a2',
+          800: '#024e82',
+          900: '#02406a',
+        },
       },
     };
 
@@ -72,6 +85,19 @@ describe('fromLegacyColors()', () => {
         800: '#024e82',
         900: '#02406a',
       },
+      // Accent color is generated from brandColor
+      accent: {
+        50: '#f3fbfd',
+        100: '#e7f7fa',
+        200: '#c3ecf4',
+        300: '#9fe1ed',
+        400: '#58cadf',
+        500: '#10b3d1',
+        600: '#0ea1bc',
+        700: '#0c869d',
+        800: '#0a6b7d',
+        900: '#085866',
+      },
     };
 
     const result = fromLegacyColors(soapboxConfig);
diff --git a/app/soapbox/utils/tailwind.ts b/app/soapbox/utils/tailwind.ts
index 798f1cfe9..af55da8d6 100644
--- a/app/soapbox/utils/tailwind.ts
+++ b/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'),
-    accent: soapboxConfig.get('accentColor'),
+    primary: isHex(brandColor) ? brandColor : null,
+    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));
 };
diff --git a/app/soapbox/utils/theme.ts b/app/soapbox/utils/theme.ts
index b12be1abb..d6225378e 100644
--- a/app/soapbox/utils/theme.ts
+++ b/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 => {
-  console.log(brandColor);
-  console.log(hexToRgb(brandColor));
+export const generateAccent = (brandColor: string): string => {
   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 => {
-  return {
-    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);
+export const generateThemeCss = (soapboxConfig: ImmutableMap<string, any>): string => {
+  return colorsToCss(toTailwind(soapboxConfig).get('colors').toJS() as TailwindColorPalette);
 };

From d57051c41c3ee14aa5743f4b3443af9c0b117c6d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 16:27:35 -0500
Subject: [PATCH 08/10] Refactor Tailwind config, add tests

---
 jest.config.js                    |  3 ---
 tailwind.config.js                | 45 +++++++------------------------
 tailwind/__tests__/colors-test.js | 35 ++++++++++++++++++++++++
 tailwind/colors.js                | 30 +++++++++++++++++++++
 4 files changed, 75 insertions(+), 38 deletions(-)
 create mode 100644 tailwind/__tests__/colors-test.js
 create mode 100644 tailwind/colors.js

diff --git a/jest.config.js b/jest.config.js
index efe164457..1f79865dc 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +1,4 @@
 module.exports = {
-  'projects': [
-    '<rootDir>/app/soapbox',
-  ],
   'testPathIgnorePatterns': [
     '<rootDir>/node_modules/',
     '<rootDir>/vendor/',
diff --git a/tailwind.config.js b/tailwind.config.js
index e697ea757..08fb9819d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,37 +1,4 @@
-// https://tailwindcss.com/docs/customizing-colors#using-css-variables
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`;
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`;
-  };
-}
-
-// Parse list of shades into Tailwind function with CSS variables
-const parseShades = (color, shades) => {
-  return shades.reduce((obj, shade) => {
-    obj[shade] = withOpacityValue(`--color-${color}-${shade}`);
-    return obj;
-  }, {});
-};
-
-// Parse color matrix into Tailwind colors object
-const parseColors = colors => {
-  return Object.keys(colors).reduce((obj, color) => {
-    obj[color] = parseShades(color, colors[color]);
-    return obj;
-  }, {});
-};
-
-// Define color matrix (of available colors)
-const colors = {
-  gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-  primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-  success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-  danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
-  accent: [300, 500],
-};
+const { parseColorMatrix, withOpacityValue } = require('./tailwind/colors');
 
 module.exports = {
   content: ['./app/**/*.{html,js,ts,tsx}'],
@@ -66,7 +33,15 @@ module.exports = {
           'Noto Color Emoji',
         ],
       },
-      colors: Object.assign(parseColors(colors), {
+      colors: Object.assign(parseColorMatrix({
+        // Define color matrix (of available colors)
+        // Colors are configured at runtime with CSS variables in soapbox.json
+        gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+        primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+        success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+        danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+        accent: [300, 500],
+      }), {
         'gradient-purple': withOpacityValue('--color-gradient-purple'),
         'gradient-blue': withOpacityValue('--color-gradient-blue'),
         'sea-blue': withOpacityValue('--color-sea-blue'),
diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
new file mode 100644
index 000000000..6bf314bf0
--- /dev/null
+++ b/tailwind/__tests__/colors-test.js
@@ -0,0 +1,35 @@
+import {
+  withOpacityValue,
+  parseColorMatrix,
+} from '../colors';
+
+describe('withOpacityValue()', () => {
+  it('returns a Tailwind color function with alpha support', () => {
+    const result = withOpacityValue('--color-primary-500');
+
+    // It returns a function
+    expect(typeof result).toBe('function');
+
+    // Test calling the function
+    expect(result({})).toBe('rgb(var(--color-primary-500))');
+    expect(result({ opacityValue: .5 })).toBe('rgb(var(--color-primary-500) / 0.5)');
+  });
+});
+
+describe('parseColorMatrix()', () => {
+  it('returns a Tailwind color object', () => {
+    const colorMatrix = {
+      gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      accent: [300, 500],
+    };
+
+    const result = parseColorMatrix(colorMatrix);
+
+    // Colors are mapped to functions which return CSS values
+    expect(result.primary[500]({})).toEqual('rgb(var(--color-primary-500))');
+    expect(result.accent[300]({ opacityValue: .5 })).toEqual('rgb(var(--color-accent-300) / 0.5)');
+  });
+});
diff --git a/tailwind/colors.js b/tailwind/colors.js
new file mode 100644
index 000000000..9fd87e6ec
--- /dev/null
+++ b/tailwind/colors.js
@@ -0,0 +1,30 @@
+// https://tailwindcss.com/docs/customizing-colors#using-css-variables
+function withOpacityValue(variable) {
+  return ({ opacityValue }) => {
+    if (opacityValue === undefined) {
+      return `rgb(var(${variable}))`;
+    }
+    return `rgb(var(${variable}) / ${opacityValue})`;
+  };
+}
+
+// Parse list of shades into Tailwind function with CSS variables
+const parseShades = (color, shades) => {
+  return shades.reduce((obj, shade) => {
+    obj[shade] = withOpacityValue(`--color-${color}-${shade}`);
+    return obj;
+  }, {});
+};
+
+// Parse color matrix into Tailwind colors object
+const parseColorMatrix = colors => {
+  return Object.keys(colors).reduce((obj, color) => {
+    obj[color] = parseShades(color, colors[color]);
+    return obj;
+  }, {});
+};
+
+module.exports = {
+  withOpacityValue,
+  parseColorMatrix,
+};

From e0e953647ee04be72ac4e8b6e0ee7cfdef488fcd Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 16:51:42 -0500
Subject: [PATCH 09/10] tailwind.config.js: parse single-tint values in the
 matrix

---
 tailwind.config.js                | 11 +++++-----
 tailwind/__tests__/colors-test.js | 20 ++++++++++++++++-
 tailwind/colors.js                | 36 ++++++++++++++++++++++---------
 3 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 08fb9819d..83c44d43e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,4 @@
-const { parseColorMatrix, withOpacityValue } = require('./tailwind/colors');
+const { parseColorMatrix } = require('./tailwind/colors');
 
 module.exports = {
   content: ['./app/**/*.{html,js,ts,tsx}'],
@@ -33,7 +33,7 @@ module.exports = {
           'Noto Color Emoji',
         ],
       },
-      colors: Object.assign(parseColorMatrix({
+      colors: parseColorMatrix({
         // Define color matrix (of available colors)
         // Colors are configured at runtime with CSS variables in soapbox.json
         gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
@@ -41,10 +41,9 @@ module.exports = {
         success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
         accent: [300, 500],
-      }), {
-        'gradient-purple': withOpacityValue('--color-gradient-purple'),
-        'gradient-blue': withOpacityValue('--color-gradient-blue'),
-        'sea-blue': withOpacityValue('--color-sea-blue'),
+        'gradient-purple': true,
+        'gradient-blue': true,
+        'sea-blue': true,
       }),
     },
   },
diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
index 6bf314bf0..cf11f1461 100644
--- a/tailwind/__tests__/colors-test.js
+++ b/tailwind/__tests__/colors-test.js
@@ -30,6 +30,24 @@ describe('parseColorMatrix()', () => {
 
     // Colors are mapped to functions which return CSS values
     expect(result.primary[500]({})).toEqual('rgb(var(--color-primary-500))');
-    expect(result.accent[300]({ opacityValue: .5 })).toEqual('rgb(var(--color-accent-300) / 0.5)');
+    expect(result.accent[300]({ opacityValue: .3 })).toEqual('rgb(var(--color-accent-300) / 0.3)');
+  });
+
+  it('parses single-tint values', () => {
+    const colorMatrix = {
+      gray: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      primary: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
+      accent: [300, 500],
+      'gradient-purple': true,
+      'gradient-blue': true,
+      'sea-blue': true,
+    };
+
+    const result = parseColorMatrix(colorMatrix);
+
+    expect(result['sea-blue']({})).toEqual('rgb(var(--color-sea-blue))');
+    expect(result['gradient-purple']({ opacityValue: .7 })).toEqual('rgb(var(--color-gradient-purple) / 0.7)');
   });
 });
diff --git a/tailwind/colors.js b/tailwind/colors.js
index 9fd87e6ec..412de7d3f 100644
--- a/tailwind/colors.js
+++ b/tailwind/colors.js
@@ -8,19 +8,35 @@ function withOpacityValue(variable) {
   };
 }
 
-// Parse list of shades into Tailwind function with CSS variables
-const parseShades = (color, shades) => {
-  return shades.reduce((obj, shade) => {
-    obj[shade] = withOpacityValue(`--color-${color}-${shade}`);
-    return obj;
+// Parse a single color as a CSS variable
+const toColorVariable = (colorName, tint = null) => {
+  const suffix = tint ? `-${tint}` : '';
+  const variable = `--color-${colorName}${suffix}`;
+
+  return withOpacityValue(variable);
+};
+
+// Parse list of tints into Tailwind function with CSS variables
+const parseTints = (colorName, tints) => {
+  return tints.reduce((colorObj, tint) => {
+    colorObj[tint] = toColorVariable(colorName, tint);
+    return colorObj;
   }, {});
 };
 
-// Parse color matrix into Tailwind colors object
-const parseColorMatrix = colors => {
-  return Object.keys(colors).reduce((obj, color) => {
-    obj[color] = parseShades(color, colors[color]);
-    return obj;
+// Parse color matrix into Tailwind color palette
+const parseColorMatrix = colorMatrix => {
+  return Object.entries(colorMatrix).reduce((palette, colorData) => {
+    const [colorName, tints] = colorData;
+
+    // Conditionally parse array or single-tint colors
+    if (Array.isArray(tints)) {
+      palette[colorName] = parseTints(colorName, tints);
+    } else if (tints === true) {
+      palette[colorName] = toColorVariable(colorName);
+    }
+
+    return palette;
   }, {});
 };
 

From 1b7bdb365839c55534a219a7426df88565bcaff4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 23 Mar 2022 17:15:40 -0500
Subject: [PATCH 10/10] Make BG shapes colors configurable

---
 app/soapbox/features/ui/components/background_shapes.js | 4 ++--
 tailwind.config.js                                      | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/background_shapes.js b/app/soapbox/features/ui/components/background_shapes.js
index c8953218c..586e9e772 100644
--- a/app/soapbox/features/ui/components/background_shapes.js
+++ b/app/soapbox/features/ui/components/background_shapes.js
@@ -18,8 +18,8 @@ export default () => (
             <use xlinkHref='#a' />
           </mask>
           <g mask='url(#b)'>
-            <path className='fill-primary-100' d='M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z' fill-rule='nonzero' filter='url(#c)' transform='translate(309.54 -367.538)' />
-            <path className='fill-accent-300' d='M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z' fill-rule='nonzero' filter='url(#d)' transform='translate(309.54 -141.056)' opacity='.1' />
+            <path className='fill-bg-shape-1' d='M1257.79 335.852C1262 527.117 897.55 530.28 792.32 977.19 600.48 981.41 435.29 545.31 431.08 354.046 426.871 162.782 578.976 4.31 770.815.088c191.844-4.222 482.764 144.5 486.974 335.764Z' fill-rule='nonzero' filter='url(#c)' transform='translate(309.54 -367.538)' />
+            <path className='fill-bg-shape-2' d='M71.127 1126.654c206.164 179.412 502.452 211.232 661.777 71.072 159.325-140.163 295.165-510.155 8.23-504.412-320.079 6.405-381.35-817.422-540.675-677.258-31 368-335.497 931.182-129.332 1110.598Z' fill-rule='nonzero' filter='url(#d)' transform='translate(309.54 -141.056)' opacity='.1' />
           </g>
         </g>
       </svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 83c44d43e..2bc311c4f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -44,6 +44,8 @@ module.exports = {
         'gradient-purple': true,
         'gradient-blue': true,
         'sea-blue': true,
+        'bg-shape-1': true,
+        'bg-shape-2': true,
       }),
     },
   },