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] 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~~