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     | Bin 2173 -> 2147 bytes
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index d238081612..112c2abc1d 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 9b88abf0db1da6316192c1dc619adab3dae86380..e697ea7576200deae2899279e1bc997bfd6f8a7d 100644
GIT binary patch
literal 2147
zcmbVOTW`}!5Pr|E80l29Q^j$5=p6+C<sf+AA_BZrNZr_zWLw+ov$HM<k^eihyS5vb
z3Q(hH6wiKh`M#Y@634JIrlj*YHbQ3KWsxRC<3#0gsuGHmij2zT4_PduL}g0TKNYzL
zqUcs=Ddri{U{Mu`k*a|2(yTs|B9UhERb&;0EoKPY0f0tR=>ozns2vd0Lzq5u006mw
zuy;6}PN6DNT*v}bp9c8Vq`K0}xh)dzZQD}yaCr5UiviTm{tgK->}_|;)jqa<I;aPO
zIEIfx6GA4*fLZ{pM2ZBmFbY05dO?poT+C+Bc0z+h6&zXGBr_j7h0qB(YLa!-n>Kxk
zvBtDYFbviFx<Ph80CrwF+&7s1D*099uPWNxx=J;FaOnDK=yhpIaT@zvk6>H#33I+<
z>>?o-M$7d*zJ3mD6PTD?h8J!?xTOZs+-XzogTs$+a6?`J8unSbsCz7(&$8T+u+`63
zx%7~~VfM<+kngUg7V@o%TfRy=$W7zJhLkVB#qH=Wwb-1)<<VpW2NO2`TJyx3Lu-z#
zIkx7+np11eCX;U?4lT9Jg??-_RY`(GkF1@FVu|{Z!GbFnhJzhXrpR>cl;kR{G92T&
zRN7D@5Rba?=wKX+vW)ll<Nfh=W%6uvO(SF9>pF0Xq(a}kQz@Q9kYs`=uriqy=IpUz
z15lz73uf&f*^x8&==7jmJFvy%DZ5UNPj_6|l3iyf$2+cd#;$|I!%63>Z8ZQ~bHALT
zt*~GMGx?)y!D8luY?G7m*^`qajd@qQ$pK)aUW;62e7|ibfPh3n0W0S!*-Y$v%L3^x
zgL73fvdD-~%SHc)He@i5D%p2OENzC7KkXmA%w%!%P9!rI`I;N+pU-fq5Wc+adq1hU
zGOF);gV`+_nFx4~752|w@Y2uvuJ@b(W|py6*3tDEJjCpUWdIj;Tfl$0y1vJ-ZS%Kh
zvrRr%54G`dS~qpJt?u6Zm-`%=wZuaxmqqB-j7!liDc+9VB?i0&Qpr;um6c`^e8a!|
z;sx#cy^kH<iF21{&OefWm&GA>a}bK?kKrAti>#YZP6=nqtXfL@UGvkb@&8I{41?!8
ce+lA+(m4f9?86YVDHW40R~wIG(Ro|^1b6&qZU6uP

literal 2173
zcmaKtOK;RL5XbNR6qb4jRNXd?<2*n}JVZqg<-m#);^5fhZ6Mi%I19T}{qER_H}zC2
zR@JUL|M5J29@}lFb`4y?zVC+7kT>Mvj1bvvN7#<9$hYX~TJ-((#l`i-)x-VRHkUul
z<>>zQkJ0x_>#M}@^R83yibS#z#zf9I-a~6GE*2q14ggzo{MQ;<>&y$<?<Z&H(<*Dq
zvm!7x8*3`_EHLdGYociyFSbXQjS$$|dTod~AtBl}u&)0uB{-i-7*}L`RkEB9&@Q=s
zjCs|KXzS+i6p4_?h^>h%iz$<fWNo(=(6B_9OuKsJJXZ#WT4Tu^%n0pjS7Y<aqHSO`
zt5|y9)Z3qTLawKkH?|$DuVK>x`Fe}3U%ILrJ8b&|&2JcMDadEo0oL9PwP>*EvkgGj
zuH%{P)b7mSRA=v82joN7bOZU=c0ZnVcr5e3+WOE|-KjE8hn=R*m9^}fbm@cnB4jfN
zw1<T7*zWzgF164VYK_LT!gQ)Lq$INf9CE;G*sLh3xWY<0E2R`n;343%l2v(9#3)ZT
zD`~}f#*mWF3d>W<DN>4Ap*peCjFi$Vlom;-EVKyehq@KRNk9NP(YSCA2x7>eDISo_
zRig1^c|d|!sg|fb52&Dp)CE$GfLNAk+^h%0)3gAb#{)_kE2KctJRp{{SYW6g5Tgkc
zVV(ex*+~foP1G_$u~s@osXQPhwS<s3As$dw>0IGG_kfBFv^WVU6$+lsi3gM<l5>o~
z1EQH=DaPOdQC`GMp{kD)lx3XZevT8Aa+ZW^0zgV^H!y^^<if`dP=YcYPZ&S~Sn+%`
zNbzj@JRdCu7aT?N1Eh<b=Hd3a0;ZD;I<+6P#`94!$r60VJ)f$ilHz^ve9Dqm6rXX=
zC)d<o070IBkFfLO-p}KE<gTk@OPbr-gJnzMTBms)HX8(t?2V>s8*|m~27Be&_b58A
z3c++4gnII-8hh6}pR!UM9oxu&SS_+WxFDYz_Zg?3>8o#co7%nI^XoUjuU$RBi|Fkr
m>gG?qRnnMi-3_gYUd|83X_xWPceaK8{xJJ}zdU<<efAHJ#L8~~


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    | Bin 4214 -> 4242 bytes
 app/soapbox/containers/soapbox.js | Bin 8418 -> 8669 bytes
 app/soapbox/utils/theme.js        | Bin 2823 -> 3532 bytes
 app/styles/themes.scss            |  44 ------------------------------
 4 files changed, 44 deletions(-)

diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index 91e1a26f27883e09d6f49d83f26fc9012d89287c..ac8749221ef4f797077026beb89ae3764244a23a 100644
GIT binary patch
delta 21
dcmeySFiCO4JQkMxocyB62CNdB=ds-21^`_52lM~{

delta 12
UcmbQF_)THMJeJM7SZ;6w03{;@Z~y=R

diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index a86573be7529e7fb412fc081e12d8f9011f7f827..c702ea12c642d343eeec565b2f811ead8c2be82a 100644
GIT binary patch
delta 235
zcmaFlc-MJ@1gk-2Zb5!gi9)qPa(+&JQE^DVb8)dktwLH+ey)OgaeiV!QhtSgX-Q^I
zv3^NLYHsRgQPy^LOE43t(h6Cd22{CoeqLH;x?Xx}iH17FRCP_gl6<dV4Nc9>(|BB&
zn1MPcGxAGpzQ&it%mFiNvzd@Oi(fU2tDvT)U{hRDnUkuJnPRIB7FJg%sVqnZa#AZw
l^plH=)$OVitcvpUOR81i`f6(vYHjqv8trN~`-n~B0s#7wQ@{WK

delta 32
ocmccX{K#>G1nXvR))w~7e7yEdn{)YNnKxe%Qf1j3A>PUb0Kq5<umAu6

diff --git a/app/soapbox/utils/theme.js b/app/soapbox/utils/theme.js
index 1b3c85dfe752dc1c28d4d8416a49166c2008205a..0f3d63b4fc4c5579962ada7722ac2166dd9b8385 100644
GIT binary patch
delta 721
zcmaJ<F>1pw6dgJQe1I-p{$Q|8l?)wY+$HT?XtSAsZCSCChA2o*Nf5$guT$tXdV^l3
z(zl!#61vE;^xymM{in~{pS!PzQA_z&Hn7WuWN&p|G6@NUyjT;Ue8U9+iKh`HkDxq&
z)e^$yxMO_jZXih#2xKEx+bW2#1`O7+DlqtpKmppY*6c9nuT>E`#@Mhy3xYL!u?5pI
z&BkMFI`$QQb+$0L%vVB#uPVC~I<q+KnZ+SriZ!Fn<eeR5Pd!<3@to7T`|qV+lht16
zN>Sb-LV4F^8GTsvk3Iv}vF8n@JG0}o(?x4$gY!K3AG+u&qKRPTp0aQd$0-IFMm8vL
zvB?xUdKc#z<M0S5?F6>$u;Zd}fpv}Nd?qi1x(a+KrE!6q8F~txUdw$YlMZrrL!~6}
pk&9JcY}nJlk;9sMxVNeIHG1l+jwJ1m7CP?U0f8WhzRBqK<`0Mr>v{kH

delta 12
TcmX>j-7dDlh<)>S&a2D-Ap8XR

diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 112c2abc1d..97a9b5f95c 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} | Bin 3532 -> 3947 bytes
 1 file changed, 0 insertions(+), 0 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 0f3d63b4fc4c5579962ada7722ac2166dd9b8385..e052a41dcb27500981db4c291af1c540aa3802cb 100644
GIT binary patch
delta 570
zcmX>j{aS8<QCvx7L8?NKyOV;gLbXDXl|o)=Zc=KIjzT(unFM1h)LL_a)q4c{fYoQf
zWONjY5zHJIQ=xXEzMh(uLUBn^W?s6ELSk}qYF>$Reoj8nB8Z?Sj4?6$CLfFq6a>0x
zvMb{%#`w+e8MiPBYLq4Bl%|4(fs#P$H?Lq`#Ow$ZNKMW!O0j|4kXLD^qmYbj1JG$1
zi7BZ-_hC`HIg;Iz(MSWV0lNy2TQKdIyn<t)DgkW}H%<2EJUjUx7q<$M=R9+BOG^@y
za#DR03s9UsS&i$lB}^f%@WQEkvpDxcMm>#^jMUszm&B4pD+QcN;lV!nAWy$GAsZn+
OQLwe+Qka~`n+*Ugb;ala

delta 130
zcmaDYcSd@G(ZtExld~E5CO)~zs5$vG<EqVNOj{UP%Mx=+Q#V_)EMn%@QAp0u$uH7T
zD9%VsNiE(i$KlDy1{NxwJd<-Fj2X{$mMf_!F)zg#q<V5R_hXQ;o6C6?GIEw=q~@l&
VB$gyjcH`>@2{S9$+D+om1^|K)F6{sS


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             | Bin 8669 -> 8727 bytes
 app/soapbox/features/ui/components/navbar.tsx |  12 +-
 app/soapbox/types/colors.ts                   |  10 ++
 app/soapbox/utils/__tests__/colors-test.js    | Bin 0 -> 462 bytes
 app/soapbox/utils/colors.ts                   | 123 ++++++++++++++++++
 app/soapbox/utils/theme.ts                    | 104 ++++++---------
 6 files changed, 179 insertions(+), 70 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 c702ea12c642d343eeec565b2f811ead8c2be82a..aad96badb26df774f56c6d94c9fc1c729fcf176f 100644
GIT binary patch
delta 107
zcmccXJl$o3BC9}2Mrv-VbAC>KQE^DVb8zrx9oDt%g6N_elcjj&jTCBX6x5XsOe~C2
tEYx)rit`f-lJYB@^YhX&)AiC*OElCIlao{PO2Ebe6{xFkX5+ms0sy;wBW(Zx

delta 75
zcmbR4a@To-A}e=teolT-aY(*%aq(tD*0t=qNCFzg`H2Nd`4!Ijd1;yHdg-Yp8tM>f
RbxpmJe6L`Q%?`ZRMF1}_8+`x(

diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 2f6ffe8df1..d9198ecc43 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 0000000000..01f97eba0f
--- /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 0000000000000000000000000000000000000000..3e444620ad58a1658efed1cb4b2d5921fcc5708c
GIT binary patch
literal 462
zcmY+A!D_@H5Qgu0ih&+9u%y<w*`#F)J?sk<dg;xWaS3GOR$XW*efMf&nsh)9pELg_
z(_gN}dhq?|d;JC4nhTJkxL0N{){&<yQ)YA?Uf$ncPjCcs$3)G$I=*!1l<ixjB#qOY
z?11KQe1`7~p!bxVaYQRUx=G<?frM5%gvs%50s@ORi|#h~pj(0`eIA?;3O}!?Je`~J
z!kg2_O%60FW042O$Yb~^R=U(J*)5zWt{5`CUwN5$)2a^j%0=Qr%NoVX_jA1Fy3ySh
r&pa*YPg|uJCJuYW*Z#x8%ZkeluNTe*)*IfeoK-UA{Dh?d#5<l}+dgf=

literal 0
HcmV?d00001

diff --git a/app/soapbox/utils/colors.ts b/app/soapbox/utils/colors.ts
new file mode 100644
index 0000000000..c20c988306
--- /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 e052a41dcb..3527199c26 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         | Bin 367 -> 1630 bytes
 app/soapbox/utils/theme.ts                     |  13 +++++++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)
 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 aa0132f3df..0000000000
--- 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 0d73976e975be50db4ddd8787ceedce23e96f0d4..c8953218c3314f47020dad6a6bd331ff10a9909b 100644
GIT binary patch
literal 1630
zcmcgsOK;ma5WeSE3{VtI4y5@e)mlAd7icfrLyNuaO_3;@tt=T5Wjp=#JCu_&4g$2N
zo;VNA<NJogxZ4k7f-j+}6SU*712SfryuZ2%r^VNVwwk*H*Edjpfa@!ObrTOzchxj~
zu6Cg$Z9Ihr(y*r-Vn2mMPbjrrIKj7hO0m7Cb?8$VVK{`b?S>=W#-<59?1z}`G#t=B
z(SGOy`G6H(se#!R|7&?4VlZktY~UE1v@MBnMibbExY;Jul(Ga)yRM%~vQ26KZnZid
zkL;+}Fm6_obH2jhr%btn&`#%OazkinW0ygkN<xKa;w^#uEE=Xze5|VMqW-MQnM3zE
z_TN4xtUug+3w633=Dvyj=5{y{h)qfAXVuRI!^di#rdaj2-8{mSn!m##Rw)jBNess*
zJiiX}Sci{ewco~?!0Mvq)w%A4?Kup~%p(l3^!WrMV|oH1)dK2wKs0{_#J)<~g|vzQ
zQuhxBzReRq<UxPpKQ4$^uP$e~-sE|7C0QQaBGYm1@G0kqI5d|S*1Kx@zSO!~=7@1`
z+O~a(bDjd6y4ZjJG=>(hU}G<4k@H+kVguP!l6mZ|-`w52%(!5@*t4#q`!VjS@tz8f
z^UuhIG>*9flrqd4`InGZf{~61;lLM;83RUfCOx=9G9{sK=q$i;&a{WZ3#J8V43`BM
zjn6r2f^iSZXvVb#EiLm-fUuG|kLjIfg+qJ3>l|kuw}5+Ji$XB3HPuW?3EJazt3hbZ
z3~CmG^wKC=|2vcUKs-+3M;M34MS0+)z9Epts-N0n+?8YzyDEii#S3OMP-PLH@_6ln
zYh2b>$*b!85mEKXofAw*2Ld@`*63Pt%S3M2703zV<dSJ4K?=bnGG{GriF1H)+({6o
zKt2r>nq!y(Sr|MGH3D^{-D40nT<2U=Nsd8CJJZ}yg{&(>y>LuRNeyPO&QOb^k;YS`
zRarc6D7tV^;5dYrR7fm{eF%XSOyPfr!{%2U3XN!t#cRX9s$;@Wjfoe8u2-9%FZY?U
T&Y$MlgG&|<S$q&~-e3I>Wn-*Z

delta 167
zcmcb|^PXvfv|46vL4Hw*f@fY%W?pJ=n7cw+QGTw1dQoa(a*1vxShTn-eWJvUGK7-i
zqGa3ZqSV6D%%W5cbv-?OILgdTOiwM=PfFJ<&PXgs)dOl(*Q`}Y&PgmT_Djr7wN+2c
mNv+V$%g;+y$W5%!EeA8z74+@66o9}+KP9sa#Dp?5t+@bP+&1_C

diff --git a/app/soapbox/utils/theme.ts b/app/soapbox/utils/theme.ts
index 3527199c26..b12be1abb0 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 | 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);
+};

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                | Bin 4242 -> 5246 bytes
 app/soapbox/containers/soapbox.js             | Bin 8730 -> 8661 bytes
 .../soapbox_config/components/site_preview.js | Bin 1999 -> 1953 bytes
 app/soapbox/utils/__tests__/tailwind-test.js  | Bin 4221 -> 4933 bytes
 app/soapbox/utils/tailwind.ts                 |  19 ++++++---
 app/soapbox/utils/theme.ts                    |  37 ++++--------------
 6 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/app/soapbox/actions/soapbox.js b/app/soapbox/actions/soapbox.js
index ac8749221ef4f797077026beb89ae3764244a23a..2871e2aae56ab3e0bca8ecbd27117ffb9798a64d 100644
GIT binary patch
delta 1092
zcmaiz&2H2%5P%O<0`)13IAmAaqS%h}Q&cW+;lR0P|I92ac9SSSQW0J4JMbJFP<!q3
z@EC}6J=;uAwG=7(W-|7C8UK3wZ}I2u?C|qk9M`(DKQ6_W-EJJL+rn4dE>0mKOnNDj
zcUYlCm#pXuA!Hi4#td`DRpelx0G_WS4>FiQ{BYbni-F2pZIKl+k>{>ZWy*LSdFG7C
zHRDC(y2zxFjF*v1RFy6muhPS@11V*x=D>b=>aicahrWMFOo{<BR+q#Cj~?c-LXa5e
zun4iA*uNk%We#XPD@0;48{nA$5~Gwi23S6ck-62GWt_xFQ>HpFULMFyo*T_OsEB7q
ztNDXjOtAGDx|h5FDpYK{)4%{Ih@AQ-F$mszes1!D-WqFIA@YJ{Aq)Pa$qQgMEtXGS
zf>*iXlUh*!u99AI@iZ}2C7t9WOkN6<(-c2#FndX+dlWWM4;Ss&wOdFYFODm%#_B11
z&T(5c#+1qhgY)PoJ=hDkrJzCpe>&a%{_gDI)xkG)KZr2R%eWmrH8pP5;!5o7clgZN
z0>KVr2mSKHbZtAB-fPh}wsp<T`yF)aDIMDD&G2opXjY<LimQ*J5x2LZUOlfq71&SD
PIoz~OH{Abz^Y`_C!6x(I

delta 43
zcmeyTF-dX5CYH^y9DA7Aic(8Ti}EJx@yPJ$<)#*;r)m`ECl(~-S8VR$`N9qWYnc#Q

diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 3571a687dcb4095749ff5b9149205e932a63fe19..4dcfdafb744186025cb33359ef5870dc41292571 100644
GIT binary patch
delta 65
zcmbQ`a@Bc*BC9}pYF=tlVo7R9Mrv-Vb8+!zL)NwIa_FKO#rcT^N%<Ad`FUxX>6;yS
HZ;Ai_F83JD

delta 108
zcmccWJj-Q+BC9}2Mrv-VbAC>KQE^DVb8zrxL)NwIg6N_ellgh&jTLHY6x5XsOe~C2
uEYx)rit`f-lJYB@^YhX&)AiC*OElCIlao{PO2Ebe6{xFgZvMk_Qv?9tDI|jc

diff --git a/app/soapbox/features/soapbox_config/components/site_preview.js b/app/soapbox/features/soapbox_config/components/site_preview.js
index 47a4c9ae100d14fe06882b4775f39e344dc9f360..b4506dd812df315a8c607d26bbbe5287e7da96aa 100644
GIT binary patch
delta 57
zcmX@lzmR{zA%XPNywsw^lGKol)ZA3(;^K{$<e4PU1vQHE6AO~^D>j=m&tL%nmOvIL

delta 103
zcmZ3;f1ZEBA%T*N)ZA3({G9xv;*fmj;NXpy<eA*i1vQHE6AO~^EA-M+OElDziW2iu
az*^Kbbrevf5|fit^Gcv{n>m?humAx17bTGZ

diff --git a/app/soapbox/utils/__tests__/tailwind-test.js b/app/soapbox/utils/__tests__/tailwind-test.js
index 7a791e40896ecb05a6c90b44573ba9cb323068bb..93f928b73a944b3c17f33659573c214d0ffccd74 100644
GIT binary patch
delta 457
zcmeyXa8zx=Qkjgzyp){OVujS)f|5#w;QYjbr2Gnn<ovv}%=F1`n2eY-ttUTZF`oR4
zRZ!hCH@CDTF)1h2H?csY8mK5Izo^(s0Yz9-p>}c%kJ-efb0@1YtFlycDJV>~VU(O4
z48-beQj?n)r6z|1X?GT>$?ZV897t~m(#wJLb2bTP1)zRKF15`GOa+X%P0(ObBxJ(m
z1g4P9o~(Nr^%NBJ^%WeGlT-6bAZ}L3ELKQQ%}XsxEJ;mKNGr<ERY)oVhJ!Q6Lz4yh
z6_}0Fk|xJ9iprX&nWrVH>i|6g0Y(M}RtoCM$;PS4X(p2=G79^qr5dKDAgM5cs4%ri
zPE1Kd5;uj28yX}Trx+rMn?b}4QWFi6k|%#;6qZf4FtbE9(E_R>(JaY4WwIiZFsp^B
Qg_+r81+J3KS?t1`0J&p+y8r+H

delta 58
zcmX@A_E%xT(#g{p=Wgy{XJ?#zj#GT|eC7hi$vy0elb5qfO!gF<3KE<=pE+c53@`uY
Or)=vOH=pAy=L7(-`xa&Z

diff --git a/app/soapbox/utils/tailwind.ts b/app/soapbox/utils/tailwind.ts
index 798f1cfe98..af55da8d63 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 b12be1abb0..d6225378e8 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                    | Bin 1090 -> 1040 bytes
 tailwind.config.js                | Bin 2147 -> 1583 bytes
 tailwind/__tests__/colors-test.js | Bin 0 -> 1213 bytes
 tailwind/colors.js                | Bin 0 -> 813 bytes
 4 files changed, 0 insertions(+), 0 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 efe1644570b7b4494130f025d325beb5998f51bb..1f79865dc5465708b0a8a5809599a14c601b5c79 100644
GIT binary patch
delta 10
RcmX@aF@a-(*hY_E%m5Yt1OEU3

delta 31
mcmbQhafoAr7)L=-epYI7N%3SgMtOF19WDihSe=bR|Cj-skO@Tq

diff --git a/tailwind.config.js b/tailwind.config.js
index e697ea7576200deae2899279e1bc997bfd6f8a7d..08fb9819d7e27ef12e5680237898a55e0d4c0d9e 100644
GIT binary patch
delta 271
zcmaDXu%5>|IX|zsM4?)tAhD=8)j2;WzsNVSq$smON1;5kB*VWTF*&oOGAuEtG*zKi
z!B(LtwXig^C{;sUProEFGp9T=FGW8Yq^nq6bF(qab0$HEc8zK-1t^&Oib*#V#?jYT
z09#V5kXV$e0JJ<UGrhDZHANw@M4_lOuOu@!6>PDBb8xUiSz=LUVp2|Ou|j5^LUDd#
zK~jE&URH5_9@Ol~8qBsl5R(gvGIJA)ChIa=uz&<6FJyLrFzz$kD?*ecCMT!nl~^f6
X8ygttD3}@;#OgrJsoku^?#KuL??F<K

delta 839
zcmZ`%!D`z;5GAb+L6nd~>8&sjA0&vaYpIc;IJXuOaL6SDyk4#CZRK6Fvuc`%MZXZx
zhlG$%$tUEHTfQNyT{*E`B9K_kzL_`g&D?%^+^>=Z=2|cDdy;6v^Ghx=irAxakz|r$
zLJQP#!LPZPb*apy!h-_c4`TN(QJhS2hT*gjRC6idlI!{Ll2ER%&PZOcXoZQP3;`6=
zg%S{zARVakC@?Xk1BU?MQ;7U+dzq#w6e43&E?DO4fPLCpV>O#JEK#RiahW(C_bnTM
zao_iml_gG~Q?BzFpKSV}2}A482~o%(=cqwW0p}!R2wZ3hr>$eKAs>dL5v*FlkV;`Q
zmraq8&rKn6RvrRYF7hhAZPau06w3<AqDW4DTWEuP1p?UMxr<#u`oHVruAf%7Q#vYR
z4-Rd{v3JH(RZX2HU=E=)_R6Y$)9g}VLA2ukwiNqaXtEjA>l%k{No-Foq8)3i?AYOZ
zf7lf|4=RQ6rcRf(rPIY4oog<xEc7(z9<rhB9cf2yk9>Pjk3N3=;wR(_S(0W?XNuH&
i!MA!h7}US)dlRJfL-2XW-2Hs|u<LtQc>f&y*m(gcKpDvZ

diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..6bf314bf0f583d3a092cedce99247b83cb12e69f
GIT binary patch
literal 1213
zcmbu8J#X7E5QcaEirYj1lB~9I^HHQjjSd}(4mP?J8O}6qv5-ZUq~aKX|9kHAVW_qP
zBrpNpK#>pM<NH!?tZ@OJM*v$LieDC`4!hr2)+(Vni_WX5DUJJy!Re=Dw1<^58;G)O
zEP38XUq+*)^3v&r645b4#8CnwhWoG089Io_sZhJh1Hv42xz*JY8WODPN(ODJMhReP
z3j|+V7Wf|oXno}aIOXdy!2OAG5v6H^Os&%!bh~tt=TS^TfyQ_YKX`MmqCd9zsh+Ho
zL4=)EX4Rb#XTf}<-ui_@(p-@ciDjv)HH1PPni$erq2hTT_b9hsh(~ndjLtY_J`3%%
z^t-_f%(;VX0&nBN81ih=QTN2=Z(!N6$M3PsEdJ7Uopq-%piK=~!~x^6cDTEPKa)Ix
z4>^^OTt0ER;zB+p@R`dsmm4m(dH%pz<k9(g0m0W&D(^2KEU{WEcL4xNK@|wl^i3^y
z?d`jO9;N%lpTW%zGCgfxBcM~TL2K0#f;pto!?w_}=u!{U*$f`}jr-G}W!)W<NBKja
h+3){qEa~aKJGNQdEVoLq*CPB1zTKPB-uP^YUjPi9VKV>#

literal 0
HcmV?d00001

diff --git a/tailwind/colors.js b/tailwind/colors.js
new file mode 100644
index 0000000000000000000000000000000000000000..9fd87e6ecaa0495e27e312b4f09492be9221731b
GIT binary patch
literal 813
zcmah{%WlFj5WMFrMk<Fy0(@_kUN~1&qUr@zA~*)z1{-;u0*(Cdb!<}}mD(Jv*q+(h
z882hlSi7Tp#%v{<y;L<P8gsp6wdTZlOIB~?msIN!*NrxG*HYLJjXo<Qt7Ri7TeXT?
zsTKCpZl=46OM85+npWf|Oo1)~jIgay$UEo@5L|)sF#rI$LVk5wmL*zMi<MNOj%DD#
zRBB<?%U&cObSEiS6pIHh2Dq^Pg#^Q(yOeX0>mD+fWsKpuG9=JQvd}Bgrm6)&Dy#95
z^1_vQOlC8jI-!hf<(a#_$SiV8<RQpmD)wVNwHYPGM$|1Ad9Ii53HbvA{NX&{-cbII
zd@+hoH5zn5$@!mvc8enBlB9f@e(#3poWJp&&yE8V+sYbwxbYk3pl?EOd+Bh}56Dxb
zlt{4jut{<nNaGK2q!<Gg*H#1T#%eh0tzP7K3Nfn8BjjIuTV1z}7>mPB8%w@oKa{sK
PJM?EkX>#^6?9=%MuN@KS

literal 0
HcmV?d00001


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                | Bin 1583 -> 1431 bytes
 tailwind/__tests__/colors-test.js | Bin 1213 -> 1903 bytes
 tailwind/colors.js                | Bin 813 -> 1299 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 08fb9819d7e27ef12e5680237898a55e0d4c0d9e..83c44d43e04a849d1b79e8161baffd5af912377a 100644
GIT binary patch
delta 80
zcmZ3_Go5>a#73<TOq(^Bk1|RsD5$3wC8lJi=9TCclol1_q^esfloXYwPPSx~mIE<#
VxD=p3y*M>dHz}tSu4FrF1ppsY8HfM?

delta 257
zcmbQvy`E=+gpiIxd1gt5e?ek$W=UmOVoqu5Mu`theEvyUsmUdJiN(d4>3JHPIhc<!
z*4Jw4C{%MPK!JLCQDRDFYF>$ML1|GzPO7>UhDjRgy1L2vIr&Ap=xQ}}u$Yqsv>cBq
b-bluPl_DEboSLXhK!1@gT#@EvdDaR5`QB7k

diff --git a/tailwind/__tests__/colors-test.js b/tailwind/__tests__/colors-test.js
index 6bf314bf0f583d3a092cedce99247b83cb12e69f..cf11f1461861673f4876628569783a15c95a1316 100644
GIT binary patch
delta 305
zcmdnX`JQh>9Sf7O!em7j*~xQR1ayow)itfT6clQKB#_E1(NHf)EGkYdRw&NQOV3Hw
zEy>I)Q7B8yDNQZj?8@ZM7_Ok8o?eugl9`%UqFYc}RFIRZZlzFCRGO*-)DHp(=_H^o
zbjjk>L|qK=T5GO}8$~8BW>%3%ttd!MF3~7TEiTO|iB^XzpDf3s;0EJqLS3z(fTkSX
pWw9F73i$<z$(bdUVIV(PDd?GlJ+F$UQd2=+!9dR(DKtPK0sw}nT^IlW

delta 22
ecmaFQx0iE69Sf7G!em7j*~xQR1SY>=6aWBLv<C73

diff --git a/tailwind/colors.js b/tailwind/colors.js
index 9fd87e6ecaa0495e27e312b4f09492be9221731b..412de7d3ff48b632f960da0876706162c77bc4ce 100644
GIT binary patch
literal 1299
zcmah|%Wm5+5WMRv7N~(pfNk9qxJBV!+Z0HUOHja!L?tX}(%@1}T!H`IU6PV5qiJ=p
zEOPcSGrM&SFWw*Ux~{!Y`c;{>L0mU>U$?fwy6Mr|z51=p^Qy7hI{eUM{6Jj&5>AOH
zEwSi&(|BbKyej{4dk~HC#|NQ%S&o<rh62Dz-#Y{40QL+7p@PlF2mnwWl(WmtW&^!x
zWv7g6QyQQrr`oyaCoWPhhOtzrs@)A00|@c=Ur4B7F`SnRDK^{`p(yGaz6*yE1TbkW
zA!+~u>12C%2V=>iu?9VOyJd|YvM#WJG6sATd$|O!jHe^hYd!HzaoBgAdZW7t`2@Sw
zV&K1F2iI_Q#bgq2tVht@Dj7o1sYX}~DODf=PIA9*3b7>ML{lpwVY}D{0ySXaK2HVA
zES{0a%>KYq-BT3)g*Z->vmMM2*G{&5Bg-Vy?bFYs(u8H+Bq&`xGX4ikG}ri2;3_$v
zi;U5H7?v;ux}GtP0N4xfNdGzEbafC~dN0o@Zn>qeDP)rx9KX^K=i=10Z2VdpN-i-q
znt;{BJEvc!G+%@lGwwW8kFk-{2qCKw&lnzk1|SQ!*0hS3P-uOGXa)%9#1X8^<GW%J
zQ!K{S;AQ*Fn6<+AE~72gY0YwjrzW`i$>~e^G3y^dYT6slA2R}Pv3I@vPv&>s9rN;7
kPs^X1yL5MN+g{7Hd^=bdhjE~w%OzOSS>$nM=aPrx52GNoh5!Hn

delta 323
zcmbQtwU%vzIwNmRW^su^ewspYMq*0pWGN=|`d|>NSix37BRM}OzeoonRjjFCYo}1n
zrJzuhT2fk+2Nl&TN=+$EPSw!JPs)O-gez1~018Hf4UPpGSDsmt;a`xLoLN#CmY7qT
zs*#|p3${U5r5a4v0vW{_B0$?~6Ev-XHo@)6pZt``nxhzGUTSj5WDREddY}VQoZ}Cc
x(#uY*EQYwdSQFK4U@Oqv1{MRktst?eI2Gb?n6JTd#nBKYXwFH>ntYVS4*>t9YWx5I


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

---
 .../ui/components/background_shapes.js        | Bin 1630 -> 1629 bytes
 tailwind.config.js                            | Bin 1431 -> 1487 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/app/soapbox/features/ui/components/background_shapes.js b/app/soapbox/features/ui/components/background_shapes.js
index c8953218c3314f47020dad6a6bd331ff10a9909b..586e9e772f331a8cefd73d8c7c5eed1e129cf009 100644
GIT binary patch
delta 39
mcmcb|bC+ksCT6arblu{N#DY{^!_9k{jTjMpqs>2AQW*gt$qm#1

delta 40
ucmcc1bB|}kCT8w}qRiaHqDoyu1B1<bn2i{@5|fit^GbA$f&3pVsf++Hwhj0I

diff --git a/tailwind.config.js b/tailwind.config.js
index 83c44d43e04a849d1b79e8161baffd5af912377a..2bc311c4f1ca3c442781e1582f122e3b765e6ab7 100644
GIT binary patch
delta 53
vcmbQveV%)RI;*CFf_hTAZgECpL8`8yx|KpnQE93UmjV<Z<cuauu+{?rkMItG

delta 11
ScmX@lJ)L`lI_u<k)&c++y92-g