Fix tailwind setup

- Adopted postcss and tailwind config to new version
- renamed colors bluegray->slate etc to not have custom
  definitions (hope to reduce migration next time)
- tailwind now doesn't build the complete css anymore, so the
  `dev-ui-build` script must compile both

modules/webapp/package.json

@@ -6,13 +6,13 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@tailwindcss/forms": "^0.4.0",
+    "autoprefixer": "^10.4.0",
+    "cssnano": "^5.0.14",
     "flag-icon-css": "^3.5.0",
-    "postcss-cli": "^9.0.1",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
     "postcss-import": "^14.0.2",
-    "autoprefixer": "^10.3.7",
-    "cssnano": "^5.0.8",
-    "postcss": "^8.3.11",
     "postcss-purgecss": "^2.0.3",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.7"
   }
 }

modules/webapp/postcss.config.js

@@ -1,31 +1,21 @@
 //postcss.config.js
-const tailwindcss = require("tailwindcss");
 
-const devPlugins =
+const basePlugins =
       [
           require('postcss-import'),
-          tailwindcss("./tailwind.config.js"),
-          require("autoprefixer")
+          require('tailwindcss'),
+          require('autoprefixer'),
       ];
 
 const prodPlugins =
       [
           require('postcss-import'),
-          tailwindcss("./tailwind.config.js"),
-          require("autoprefixer"),
-          require("postcss-purgecss")({
-              content: [
-                  "./src/main/elm/**/*.elm",
-                  "./src/main/styles/keep.txt",
-                  "../restserver/src/main/templates/*.html"
-              ],
-              defaultExtractor: content => content.match(/[A-Za-z0-9-_:/\.]+/g) || []
-          }),
-          require('cssnano')({
-              preset: 'default'
-          })
-      ]
+          require('tailwindcss'),
+          require('autoprefixer'),
+          require('cssnano'),
+      ];
+
 
 module.exports = (ctx) => ({
-    plugins: ctx.env === 'production' ? prodPlugins : devPlugins
-});
+    plugins: ctx && ctx.env === 'production' ? prodPlugins : basePlugins
+})

modules/webapp/src/main/elm/App/View2.elm

@@ -68,7 +68,7 @@ topNavUser auth model =
             , disabled = not (Page.hasSidebar model.page)
             , attrs = [ href "#" ]
             , baseStyle = "font-bold inline-flex items-center px-4 py-2"
-            , activeStyle = "hover:bg-blue-200 dark:hover:bg-bluegray-800 w-12"
+            , activeStyle = "hover:bg-blue-200 dark:hover:bg-slate-800 w-12"
             }
         , headerNavItem True model
         , div [ class "flex flex-grow justify-center" ]
@@ -103,7 +103,7 @@ topNavAnon model =
             , disabled = not (Page.hasSidebar model.page)
             , attrs = [ href "#" ]
             , baseStyle = "font-bold inline-flex items-center px-4 py-2"
-            , activeStyle = "hover:bg-blue-200 dark:hover:bg-bluegray-800 w-12"
+            , activeStyle = "hover:bg-blue-200 dark:hover:bg-slate-800 w-12"
             }
         , headerNavItem False model
         , div [ class "flex flex-grow justify-end" ]
@@ -131,7 +131,7 @@ headerNavItem authenticated model =
     in
     tag
         [ class "inline-flex font-bold items-center px-4"
-        , classList [ ( "hover:bg-blue-200 dark:hover:bg-bluegray-800", authenticated ) ]
+        , classList [ ( "hover:bg-blue-200 dark:hover:bg-slate-800", authenticated ) ]
         , if authenticated then
             Page.href HomePage
 
@@ -204,12 +204,12 @@ mainContent model =
 
 styleTopNav : String
 styleTopNav =
-    "top-0 fixed z-50 w-full flex flex-row justify-start shadow-sm h-12 bg-blue-100 dark:bg-bluegray-900 text-gray-800 dark:text-bluegray-200 antialiased"
+    "top-0 fixed z-50 w-full flex flex-row justify-start shadow-sm h-12 bg-blue-100 dark:bg-slate-900 text-gray-800 dark:text-slate-200 antialiased"
 
 
 styleMain : String
 styleMain =
-    "mt-12 flex md:flex-row flex-col w-full h-screen-12 overflow-y-hidden bg-white dark:bg-bluegray-800 text-gray-800 dark:text-bluegray-300 antialiased"
+    "mt-12 flex md:flex-row flex-col w-full h-screen-12 overflow-y-hidden bg-white dark:bg-slate-800 text-gray-800 dark:text-slate-300 antialiased"
 
 
 langMenu : Model -> Html Msg
@@ -226,7 +226,7 @@ langMenu model =
             a
                 [ classList
                     [ ( dropdownItem, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-700", lang == texts.lang )
+                    , ( "bg-gray-200 dark:bg-slate-700", lang == texts.lang )
                     ]
                 , onClick (SetLanguage lang)
                 , href "#"
@@ -266,7 +266,7 @@ dataMenu texts _ model =
             [ i [ class "fa fa-cogs" ] []
             , div
                 [ class "h-5 w-5 rounded-full text-xs px-1 py-1 absolute top-1 left-1 font-bold"
-                , class "dark:bg-lightblue-500 dark:text-gray-200"
+                , class "dark:bg-sky-500 dark:text-gray-200"
                 , class "bg-blue-500 text-gray-50"
                 , classList [ ( "hidden", model.jobsWaiting <= 0 ) ]
                 ]
@@ -317,7 +317,7 @@ dataMenu texts _ model =
                         class "fa fa-tachometer-alt w-6"
 
                       else
-                        class "fa fa-tachometer-alt w-6 animate-pulse dark:text-lightblue-500 text-blue-500"
+                        class "fa fa-tachometer-alt w-6 animate-pulse dark:text-sky-500 text-blue-500"
                     ]
                     []
                 , span [ class "ml-1" ]
@@ -424,7 +424,7 @@ userPageLink model page children =
     a
         [ classList
             [ ( dropdownItem, True )
-            , ( "bg-gray-200 dark:bg-bluegray-700", model.page == page )
+            , ( "bg-gray-200 dark:bg-slate-700", model.page == page )
             ]
         , onClick ToggleUserMenu
         , Page.href page
@@ -437,7 +437,7 @@ dataPageLink model page classes children =
     a
         [ classList
             ([ ( dropdownItem, True )
-             , ( "bg-gray-200 dark:bg-bluegray-700", model.page == page )
+             , ( "bg-gray-200 dark:bg-slate-700", model.page == page )
              ]
                 ++ classes
             )
@@ -449,12 +449,12 @@ dataPageLink model page classes children =
 
 dropdownLink : String
 dropdownLink =
-    "px-4 py-2 w-12 font-bold inline-flex h-full items-center hover:bg-blue-200 dark:hover:bg-bluegray-800"
+    "px-4 py-2 w-12 font-bold inline-flex h-full items-center hover:bg-blue-200 dark:hover:bg-slate-800"
 
 
 dropdownItem : String
 dropdownItem =
-    "transition-colors duration-200 items-center block px-4 py-2 text-normal hover:bg-gray-200 dark:hover:bg-bluegray-700 dark:hover:text-bluegray-50"
+    "transition-colors duration-200 items-center block px-4 py-2 text-normal hover:bg-gray-200 dark:hover:bg-slate-700 dark:hover:text-slate-50"
 
 
 dropdownHeadItem : String
@@ -464,7 +464,7 @@ dropdownHeadItem =
 
 dropdownMenu : String
 dropdownMenu =
-    " absolute right-0 bg-white dark:bg-bluegray-800 border dark:border-bluegray-700 dark:text-bluegray-300 shadow-lg opacity-1 transition duration-200 min-w-max "
+    " absolute right-0 bg-white dark:bg-slate-800 border dark:border-slate-700 dark:text-slate-300 shadow-lg opacity-1 transition duration-200 min-w-max "
 
 
 viewShare : Messages -> String -> Model -> List (Html Msg)

modules/webapp/src/main/elm/Comp/AttachmentMeta.elm

@@ -99,7 +99,7 @@ viewData2 texts meta =
         [ div [ class "text-lg font-bold" ]
             [ text texts.content
             ]
-        , div [ class "px-2 py-2 text-sm bg-yellow-50 dark:bg-warmgray-800 break-words whitespace-pre max-h-80 overflow-auto" ]
+        , div [ class "px-2 py-2 text-sm bg-yellow-50 dark:bg-stone-800 break-words whitespace-pre max-h-80 overflow-auto" ]
             [ text meta.content
             ]
         , div [ class "text-lg font-bold mt-2" ]

modules/webapp/src/main/elm/Comp/Basic.elm

@@ -178,12 +178,12 @@ linkLabel model =
             [ class S.basicLabel
             , class "inline-block md:text-sm my-auto whitespace-nowrap"
             , class "border-blue-500 text-blue-500 "
-            , class "dark:border-lightblue-300 dark:text-lightblue-300"
+            , class "dark:border-sky-300 dark:text-sky-300"
             ]
 
         hover =
             [ class "hover:bg-blue-500 hover:text-gray-200"
-            , class "dark:hover:bg-lightblue-300 dark:hover:text-bluegray-900"
+            , class "dark:hover:bg-sky-300 dark:hover:text-slate-900"
             ]
 
         attrs =

modules/webapp/src/main/elm/Comp/CalEventInput.elm

@@ -317,7 +317,7 @@ view2 texts extraClasses mev model =
                     text ""
             ]
         , div
-            [ class "px-2 pt-4 pb-2 border-0 border-l border-b border-r bg-gray-50 dark:bg-bluegray-700"
+            [ class "px-2 pt-4 pb-2 border-0 border-l border-b border-r bg-gray-50 dark:bg-slate-700"
             , class S.border
             ]
             [ div []

modules/webapp/src/main/elm/Comp/ColorTagger.elm

@@ -175,7 +175,7 @@ renderFormData2 opts data =
     in
     div
         [ class "flex flex-col space-y-4 md:space-y-2 mt-2"
-        , class "px-2 border-0 border-l dark:border-bluegray-600"
+        , class "px-2 border-0 border-l dark:border-slate-600"
         ]
         (List.map valueItem values)
 

modules/webapp/src/main/elm/Comp/ContactField.elm

@@ -178,7 +178,7 @@ view2 cfg _ model =
             [ classList
                 [ ( "hidden", List.isEmpty model.items )
                 ]
-            , class "flex flex-col space-y-2 mt-2 px-2 border-0 border-l dark:border-bluegray-600 "
+            , class "flex flex-col space-y-2 mt-2 px-2 border-0 border-l dark:border-slate-600 "
             ]
             (List.map (renderItem2 cfg) model.items)
         ]

modules/webapp/src/main/elm/Comp/Dropzone.elm

@@ -136,11 +136,11 @@ view2 : Texts -> Model -> Html Msg
 view2 texts model =
     div
         [ classList
-            [ ( "bg-opacity-100 bg-blue-100 dark:bg-lightblue-800", model.state.hover )
-            , ( "bg-blue-100 dark:bg-lightblue-900 bg-opacity-50", not model.state.hover )
+            [ ( "bg-opacity-100 bg-blue-100 dark:bg-sky-800", model.state.hover )
+            , ( "bg-blue-100 dark:bg-sky-900 bg-opacity-50", not model.state.hover )
             , ( "disabled", not model.state.active )
             ]
-        , class "flex flex-col justify-center items-center py-2 md:py-12 border-0 border-t-2 border-blue-500 dark:border-lightblue-500 dropzone"
+        , class "flex flex-col justify-center items-center py-2 md:py-12 border-0 border-t-2 border-blue-500 dark:border-sky-500 dropzone"
         , onDragEnter DragEnter
         , onDragOver DragEnter
         , onDragLeave DragLeave
@@ -159,7 +159,7 @@ view2 texts model =
             { label = texts.or
             , topCss = "w-2/3 mb-4 hidden md:inline-flex"
             , labelCss = "px-4 bg-gray-200 bg-opacity-50"
-            , lineColor = "bg-gray-300 dark:bg-bluegray-600"
+            , lineColor = "bg-gray-300 dark:bg-slate-600"
             }
         , B.primaryBasicButton
             { label = texts.basics.selectPlaceholder

modules/webapp/src/main/elm/Comp/EmailInput.elm

@@ -187,7 +187,7 @@ view2 cfg values model =
                 , onInput SetInput
                 , onBlur (KeyPress 13)
                 , class "inline-flex w-24 border-0 px-0 focus:ring-0 h-6 text-sm"
-                , class "placeholder-gray-400 dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500"
+                , class "placeholder-gray-400 dark:text-slate-200 dark:bg-slate-800 dark:border-slate-500"
                 ]
                 []
             ]
@@ -217,7 +217,7 @@ renderMenu2 style model =
             a
                 [ class style.item
                 , classList
-                    [ ( "bg-gray-200 dark:bg-bluegray-700 dark:text-bluegray-50", model.active == Just v )
+                    [ ( "bg-gray-200 dark:bg-slate-700 dark:text-slate-50", model.active == Just v )
                     ]
                 , href "#"
                 , onClick (AddEmail v)

modules/webapp/src/main/elm/Comp/EventSample.elm

@@ -88,7 +88,7 @@ update flags msg model =
 
 styleBase : String
 styleBase =
-    "bg-gray-100 dark:bg-bluegray-900 text-gray-900 dark:text-gray-100 text-sm leading-5"
+    "bg-gray-100 dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-sm leading-5"
 
 
 stylePayload : String

modules/webapp/src/main/elm/Comp/FolderDetail.elm

@@ -509,7 +509,7 @@ viewMembers2 texts model =
             ]
         , div
             [ class "flex flex-col space-y-4 md:space-y-2 mt-2"
-            , class "px-2 border-0 border-l dark:border-bluegray-600"
+            , class "px-2 border-0 border-l dark:border-slate-600"
             ]
             (List.map (viewMember2 texts) model.members)
         ]

modules/webapp/src/main/elm/Comp/FolderSelect.elm

@@ -215,10 +215,10 @@ viewItem2 dropModel model item =
     in
     a
         ([ classList
-            [ ( "bg-blue-100 dark:bg-bluegray-600", highlightDrop )
+            [ ( "bg-blue-100 dark:bg-slate-600", highlightDrop )
             ]
          , class "flex flex-row items-center"
-         , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-bluegray-600"
+         , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-slate-600"
          , href "#"
          , onClick (Toggle item)
          ]
@@ -237,7 +237,7 @@ numberLabel : Int -> Html msg
 numberLabel num =
     div
         [ class "bg-gray-200 border rounded-full h-6 w-6 flex items-center justify-center text-xs"
-        , class "dark:bg-bluegray-800 dark:text-bluegray-200 dark:border-bluegray-800 dark:bg-opacity-50"
+        , class "dark:bg-slate-800 dark:text-slate-200 dark:border-slate-800 dark:bg-opacity-50"
         ]
         [ text (String.fromInt num)
         ]