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
This commit is contained in:
eikek
2021-12-20 23:03:05 +01:00
parent e9d5377a45
commit f5e375614f
50 changed files with 592 additions and 626 deletions

View File

@ -17,12 +17,12 @@ sidebar =
sidebarBg : String
sidebarBg =
" bg-blue-50 dark:bg-bluegray-700 "
" bg-blue-50 dark:bg-slate-700 "
sidebarMenuItemActive : String
sidebarMenuItemActive =
"bg-blue-100 dark:bg-bluegray-600"
"bg-blue-100 dark:bg-slate-600"
content : String
@ -32,7 +32,7 @@ content =
sidebarLink : String
sidebarLink =
" mb-2 px-4 py-3 flex flex-row hover:bg-blue-100 dark:hover:bg-bluegray-600 hover:font-bold rounded rounded-lg items-center "
" mb-2 px-4 py-3 flex flex-row hover:bg-blue-100 dark:hover:bg-slate-600 hover:font-bold rounded rounded-lg items-center "
successMessage : String
@ -67,7 +67,7 @@ warnMessageColors =
infoMessageBase : String
infoMessageBase =
" border border-blue-800 bg-blue-100 text-blue-800 dark:border-lightblue-200 dark:bg-lightblue-800 dark:text-lightblue-200 dark:bg-opacity-25 "
" border border-blue-800 bg-blue-100 text-blue-800 dark:border-sky-200 dark:bg-sky-800 dark:text-sky-200 dark:bg-opacity-25 "
infoMessage : String
@ -78,7 +78,7 @@ infoMessage =
message : String
message =
" border border-gray-600 bg-gray-50 text-gray-600 "
++ "dark:border-bluegray-400 dark:bg-bluegray-600 dark:bg-opacity-80 dark:text-bluegray-400 "
++ "dark:border-slate-400 dark:bg-slate-600 dark:bg-opacity-80 dark:text-slate-400 "
++ "px-4 py-2 rounded "
@ -104,12 +104,12 @@ redBasicLabel =
basicLabel : String
basicLabel =
" label border-gray-600 text-gray-600 dark:border-bluegray-300 dark:text-bluegray-300 "
" label border-gray-600 text-gray-600 dark:border-slate-300 dark:text-slate-300 "
blueBasicLabel : String
blueBasicLabel =
" label border-blue-500 text-blue-500 dark:border-lightblue-200 dark:text-lightblue-200 "
" label border-blue-500 text-blue-500 dark:border-sky-200 dark:text-sky-200 "
@ -128,12 +128,12 @@ primaryButtonPlain =
primaryButtonMain : String
primaryButtonMain =
" my-auto whitespace-nowrap bg-blue-500 dark:bg-lightblue-800 text-white text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
" my-auto whitespace-nowrap bg-blue-500 dark:bg-sky-800 text-white text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
primaryButtonHover : String
primaryButtonHover =
" hover:bg-blue-600 dark:hover:bg-lightblue-700 "
" hover:bg-blue-600 dark:hover:bg-sky-700 "
primaryButtonRounded : String
@ -152,12 +152,12 @@ primaryBasicButton =
primaryBasicButtonMain : String
primaryBasicButtonMain =
" rounded my-auto whitespace-nowrap border border-blue-500 dark:border-lightblue-500 text-blue-500 dark:text-lightblue-500 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
" rounded my-auto whitespace-nowrap border border-blue-500 dark:border-sky-500 text-blue-500 dark:text-sky-500 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
primaryBasicButtonHover : String
primaryBasicButtonHover =
" hover:bg-blue-600 hover:text-white dark:hover:text-white dark:hover:bg-lightblue-500 "
" hover:bg-blue-600 hover:text-white dark:hover:text-white dark:hover:bg-sky-500 "
@ -171,12 +171,12 @@ secondaryButton =
secondaryButtonMain : String
secondaryButtonMain =
" rounded my-auto whitespace-nowrap bg-gray-300 dark:bg-bluegray-400 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 dark:text-gray-800 text-gray-800"
" rounded my-auto whitespace-nowrap bg-gray-300 dark:bg-slate-400 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 dark:text-gray-800 text-gray-800"
secondaryButtonHover : String
secondaryButtonHover =
" hover:bg-gray-400 dark:hover:bg-bluegray-300 "
" hover:bg-gray-400 dark:hover:bg-slate-300 "
secondaryBasicButton : String
@ -200,12 +200,12 @@ secondaryBasicButtonRounded =
secondaryBasicButtonMain : String
secondaryBasicButtonMain =
" my-auto whitespace-nowrap border-gray-500 dark:border-bluegray-500 text-gray-500 dark:text-bluegray-400 text-center shadow-none focus:outline-none focus:ring focus:ring-opacity-75 "
" my-auto whitespace-nowrap border-gray-500 dark:border-slate-500 text-gray-500 dark:text-slate-400 text-center shadow-none focus:outline-none focus:ring focus:ring-opacity-75 "
secondaryBasicButtonHover : String
secondaryBasicButtonHover =
" hover:bg-gray-600 hover:text-white dark:hover:text-white dark:hover:bg-bluegray-500 dark:hover:text-bluegray-100 "
" hover:bg-gray-600 hover:text-white dark:hover:text-white dark:hover:bg-slate-500 dark:hover:text-slate-100 "
@ -224,17 +224,17 @@ deleteButtonMain =
deleteButtonHover : String
deleteButtonHover =
" hover:bg-red-600 hover:text-white dark:hover:bg-orange-500 dark:hover:text-bluegray-900 "
" hover:bg-red-600 hover:text-white dark:hover:bg-orange-500 dark:hover:text-slate-900 "
undeleteButton : String
undeleteButton =
" rounded my-auto whitespace-nowrap border border-green-500 dark:border-lightgreen-500 text-green-500 dark:text-lightgreen-500 text-center px-4 py-2 shadow-none focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-green-600 hover:text-white dark:hover:text-white dark:hover:bg-lightgreen-500 dark:hover:text-bluegray-900 "
" rounded my-auto whitespace-nowrap border border-green-500 dark:border-lightgreen-500 text-green-500 dark:text-lightgreen-500 text-center px-4 py-2 shadow-none focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-green-600 hover:text-white dark:hover:text-white dark:hover:bg-lightgreen-500 dark:hover:text-slate-900 "
deleteLabel : String
deleteLabel =
"label my-auto whitespace-nowrap border border-red-500 dark:border-lightred-500 text-red-500 dark:text-orange-500 text-center focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-red-600 hover:text-white dark:hover:text-white dark:hover:bg-orange-500 dark:hover:text-bluegray-900"
"label my-auto whitespace-nowrap border border-red-500 dark:border-lightred-500 text-red-500 dark:text-orange-500 text-center focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-red-600 hover:text-white dark:hover:text-white dark:hover:bg-orange-500 dark:hover:text-slate-900"
@ -243,7 +243,7 @@ deleteLabel =
link : String
link =
" text-blue-400 hover:text-blue-500 dark:text-lightblue-200 dark:hover:text-lightblue-100 cursor-pointer "
" text-blue-400 hover:text-blue-500 dark:text-sky-200 dark:hover:text-sky-100 cursor-pointer "
inputErrorBorder : String
@ -258,12 +258,12 @@ inputLabel =
textInput : String
textInput =
" placeholder-gray-400 w-full dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500 border-gray-400 rounded " ++ formFocusRing
" placeholder-gray-400 w-full dark:text-slate-200 dark:bg-slate-800 dark:border-slate-500 border-gray-400 rounded " ++ formFocusRing
textInputSidebar : String
textInputSidebar =
" w-full placeholder-gray-400 border-gray-400 bg-blue-50 dark:text-bluegray-200 dark:bg-bluegray-700 dark:border-bluegray-500 rounded " ++ formFocusRing
" w-full placeholder-gray-400 border-gray-400 bg-blue-50 dark:text-slate-200 dark:bg-slate-700 dark:border-slate-500 rounded " ++ formFocusRing
textAreaInput : String
@ -273,46 +273,46 @@ textAreaInput =
inputIcon : String
inputIcon =
"absolute left-3 top-2 w-10 text-gray-400 dark:text-bluegray-400 "
"absolute left-3 top-2 w-10 text-gray-400 dark:text-slate-400 "
dateInputIcon : String
dateInputIcon =
"absolute left-3 top-3 w-10 text-gray-400 dark:text-bluegray-400 "
"absolute left-3 top-3 w-10 text-gray-400 dark:text-slate-400 "
inputLeftIconLink : String
inputLeftIconLink =
"inline-flex items-center justify-center absolute right-0 top-0 h-full w-10 rounded-r cursor-pointer "
++ "text-gray-400 dark:text-bluegray-400 "
++ "bg-gray-300 dark:bg-bluegray-700 "
++ "dark:border-bluegray-500 border-0 border-r border-t border-b border-gray-500 "
++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-bluegray-600"
++ "text-gray-400 dark:text-slate-400 "
++ "bg-gray-300 dark:bg-slate-700 "
++ "dark:border-slate-500 border-0 border-r border-t border-b border-gray-500 "
++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-slate-600"
inputLeftIconLinkSidebar : String
inputLeftIconLinkSidebar =
"inline-flex items-center justify-center absolute right-0 top-0 h-full w-10 rounded-r cursor-pointer "
++ "text-gray-400 dark:text-bluegray-400 "
++ "bg-gray-300 dark:bg-bluegray-600 "
++ "dark:border-bluegray-500 border-0 border-r border-t border-b border-gray-500 "
++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-bluegray-500"
++ "text-gray-400 dark:text-slate-400 "
++ "bg-gray-300 dark:bg-slate-600 "
++ "dark:border-slate-500 border-0 border-r border-t border-b border-gray-500 "
++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-slate-500"
inputLeftIconOnly : String
inputLeftIconOnly =
"inline-flex items-center justify-center absolute right-0 top-0 h-full w-10 rounded-r "
++ "dark:border-bluegray-500 border-0 border-r border-t border-b border-gray-500 "
++ "dark:border-slate-500 border-0 border-r border-t border-b border-gray-500 "
checkboxInput : String
checkboxInput =
" checkbox w-5 h-5 md:w-4 md:h-4 text-black dark:text-bluegray-600 dark:bg-bluegray-600 dark:border-bluegray-700" ++ formFocusRing
" checkbox w-5 h-5 md:w-4 md:h-4 text-black dark:text-slate-600 dark:bg-slate-600 dark:border-slate-700" ++ formFocusRing
formFocusRing : String
formFocusRing =
" focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-bluegray-400 "
" focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-slate-400 "
radioInput : String
@ -322,17 +322,17 @@ radioInput =
box : String
box =
" border dark:border-bluegray-500 bg-white dark:bg-bluegray-800 shadow-md "
" border dark:border-slate-500 bg-white dark:bg-slate-800 shadow-md "
border : String
border =
" border dark:border-bluegray-600 "
" border dark:border-slate-600 "
border2 : String
border2 =
" border-2 dark:border-bluegray-600 "
" border-2 dark:border-slate-600 "
header1 : String
@ -352,7 +352,7 @@ header3 =
formHeader : String
formHeader =
header3 ++ " text-xl mb-4 font-medium tracking-wide border-b dark:border-bluegray-300 border-gray-800"
header3 ++ " text-xl mb-4 font-medium tracking-wide border-b dark:border-slate-300 border-gray-800"
editLinkTableCellStyle : String
@ -362,22 +362,22 @@ editLinkTableCellStyle =
dimmer : String
dimmer =
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-90 dark:bg-bluegray-900 dark:bg-opacity-90 z-50 flex flex-col items-center justify-center px-4 md:px-8 py-2 "
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-90 dark:bg-slate-900 dark:bg-opacity-90 z-50 flex flex-col items-center justify-center px-4 md:px-8 py-2 "
dimmerLight : String
dimmerLight =
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-bluegray-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-slate-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
dimmerCard : String
dimmerCard =
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-lightblue-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-sky-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
dimmerRow : String
dimmerRow =
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 dark:bg-lightblue-900 dark:bg-opacity-50 z-30 flex flex-row items-center px-1 py-2 "
" absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 dark:bg-sky-900 dark:bg-opacity-50 z-30 flex flex-row items-center px-1 py-2 "
tableMain : String
@ -387,9 +387,9 @@ tableMain =
tableRow : String
tableRow =
"border-t dark:border-bluegray-600"
"border-t dark:border-slate-600"
qrCode : String
qrCode =
"max-w-min dark:bg-bluegray-400 bg-gray-50 mx-auto md:mx-0"
"max-w-min dark:bg-slate-400 bg-gray-50 mx-auto md:mx-0"