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] utils/tailwind.ts: Tailwind/SoapboxConfig conversion
 functions

---
 app/soapbox/types/colors.ts                  |   2 +-
 app/soapbox/utils/__tests__/tailwind-test.js | Bin 0 -> 4221 bytes
 app/soapbox/utils/tailwind.ts                |  44 +++++++++++++++++++
 3 files changed, 45 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 01f97eba0f..75d9a3eb66 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 0000000000000000000000000000000000000000..7a791e40896ecb05a6c90b44573ba9cb323068bb
GIT binary patch
literal 4221
zcmeHK%Z}PG6y5U`SLz}`VjzSN9xdIBx@gtWRBC^~@na@ch||QhAjH4dj_t%@C?lb&
znriR{II*vtdymgOr0as00`_o+3P2TnT(36*B^gz}55P*k1~0Xs_qNwd?Fzxap)~uI
z=44RM`%E7Y-re$ym(>91wm>=gf-))uZ6XbaBViV)ScF!%OcUyRZ7{#@4Z!ci>OJgx
z0IBdj%=4eL6cr?;j9KphX)ZV*utxx__Ju<4*NFh~SzZaKI4Tmpz2!MeA7IsaRe$fq
zUV`@~h~^=gdvNH>V}cwyhI}iE1toI1I-D9snXXZ}TQ&f|G*BT}$QF!v12Yd`9Mm|C
z*@Pty9%>v1G+<K)pJ;rMU_zOLM;eb9n$yU^ry4g$Z}*KYKAYmunLji5Bo2{_&kY_%
zbnfDd1`lG?#5w4V4xK!ewAy4sX342*C;u|7DtS7ezMei5{L@#z-<O|vNZ`l&<hx9^
zZ*yKRG4)WaC`!s`SshWJ0$wizE-3?9%}Gs;>H=1n+O@oMxM34qGp|}6@u{hL!w>gr
z`IbE@38v1B1#&cb1<5_Th5hyd*l14)qY=EjxoKYWwUe?gO{-^0I9)+Jr)oUUc8>g9
zKvQS6L(r>uIhW}Y@p@9kXC+K&*M}b)l>Je)+Fr)R<3G_SgfY!U-8B_C!i0>+R%Tv+
zp!^^04M3;yM4OKoVH1aGw#_4k=*+=wn@23d?tCNv2vM>)(dOfXu<6{1W7>SDj;f8A
zHXqIs=_H)_rp<@Jf&|#XO`9L18422U4q$G|cpAq+yYKln|5tCyk(73v<Ov<s&t>1w
zsc!Tq1=Ki0W!zfJ=J>pheX*9~YV#VtoUebkMkd#%Jl^vHY0J4zx6)^yGxSbLjSXqM
pR%@?bqZe<*>R9ftELTdY##ukmCh!T7u4=#P{<rrpyX{Kke*^KM>D2%L

literal 0
HcmV?d00001

diff --git a/app/soapbox/utils/tailwind.ts b/app/soapbox/utils/tailwind.ts
new file mode 100644
index 0000000000..798f1cfe98
--- /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);
+};