chore: Improve tailwind integration and theme neutralization

generators/client/files.js

@@ -147,6 +147,7 @@ const svelteFiles = {
 				'Alert.svelte',
 				'Button.svelte',
 				'CheckboxControl.svelte',
+				'Icon.svelte',
 				'InputControl.svelte',
 				'Modal.svelte',
 				'SelectControl.svelte',

generators/client/templates/svelte/src/main/webapp/app/components/Button.svelte.ejs

@@ -6,11 +6,17 @@
 
 <button
 	on:click|preventDefault
-	class="my-4 focus:outline-none focus:ring m-auto btn {classes}"
-	class:btn-primary="{role === 'primary'}"
-	class:btn-secondary="{role === 'secondary'}"
-	class:btn-danger="{role === 'danger'}"
-	class:btn-action="{role === 'action'}"
+	class="my-4 focus:outline-none focus:ring m-auto py-2 px-6 font-bold rounded transition-colors duration-200 disabled:opacity-75 disabled:pointer-events-none {role ===
+'primary'
+		? 'bg-primary-700 text-white dark:bg-primary-500 dark:text-gray-100 hover:bg-primary-800 dark:hover:bg-primary-400 focus:ring-primary-500 '
+		: ''} {role === 'neutral'
+		? 'bg-gray-500 dark:bg-gray-300 text-white dark:text-gray-800 hover:bg-gray-700 dark:hover:bg-gray-500 focus:ring-gray-500 '
+		: ''} {role === 'danger'
+		? 'bg-red-700 dark:bg-red-500 text-white hover:bg-red-800 dark:hover:bg-red-400 focus:ring-red-500 '
+		: ''} {role === 'action'
+		? 'py-2 px-2 font-semibold px-3 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 focus:ring-gray-500 '
+		: ''}
+{classes}"
 	disabled="{disabled}"
 	{...$$restProps}
 >

generators/client/templates/svelte/src/main/webapp/app/components/CheckboxControl.svelte.ejs

@@ -16,7 +16,7 @@
 	<input
 		type="checkbox"
 		checked="{checked}"
-		class="appearance-none w-5 h-5 mr-2 border-2 border-gray-200 dark:border-gray-700 checked:border-transparent rounded focus:outline-none focus:ring-2 align-middle bg-transparent bg-no-repeat bg-center checked:bg-blue-600 dark:checked:bg-blue-500 {classes}"
+		class="appearance-none w-5 h-5 mr-2 border-2 border-gray-200 dark:border-gray-700 checked:border-transparent rounded focus:outline-none focus:ring-2 focus:ring-primary-500 align-middle bg-transparent bg-no-repeat bg-center checked:bg-primary-600 dark:checked:bg-primary-500 {classes}"
 		group="{group}"
 		value="{value}"
 		on:change

generators/client/templates/svelte/src/main/webapp/app/components/Icon.svelte.ejs

@@ -0,0 +1,11 @@
+<script>
+	import Icon from 'fa-svelte'
+
+	export let classes = ''
+	export let icon
+</script>
+
+<Icon
+	class="w-4 h-4 overflow-visible inline-block fill-current {classes}"
+	icon="{icon}"
+/>

generators/client/templates/svelte/src/main/webapp/app/components/InputControl.svelte.ejs

@@ -1,8 +1,8 @@
 <script>
 	import { createEventDispatcher, afterUpdate } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 
+	import Icon from './Icon.svelte'
 	import { validate, createValidator } from '../utils/validator.js'
 
 	export let value = ''
@@ -68,8 +68,8 @@
 		class:text-xs="{focusedOrContainsValue}"
 		class:text-gray-700="{!focused}"
 		class:dark:text-gray-400="{!focused}"
-		class:text-blue-700="{focusedAndValidOrPristine}"
-		class:dark:text-blue-500="{focusedAndValidOrPristine}"
+		class:text-primary-700="{focusedAndValidOrPristine}"
+		class:dark:text-primary-500="{focusedAndValidOrPristine}"
 		class:text-red-600="{dirtyAndInvalid && focused}"
 		class:dark:text-red-500="{dirtyAndInvalid && focused}"
 		for="{idVal}"
@@ -81,8 +81,8 @@
 		class:border-2="{focused}"
 		class:border-gray-400="{pristineOrValid}"
 		class:dark:border-gray-700="{pristineOrValid}"
-		class:border-blue-600="{focusedAndValidOrPristine}"
-		class:dark:border-blue-500="{focusedAndValidOrPristine}"
+		class:border-primary-600="{focusedAndValidOrPristine}"
+		class:dark:border-primary-500="{focusedAndValidOrPristine}"
 		class:border-red-600="{dirtyAndInvalid}"
 		class:dark:border-red-500="{dirtyAndInvalid}"
 		type="{type}"
@@ -101,7 +101,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-test="{name}-error" class="flex items-center">
-				<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+				<Icon classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}

generators/client/templates/svelte/src/main/webapp/app/components/SelectControl.svelte.ejs

@@ -1,9 +1,9 @@
 <script>
 	import { createEventDispatcher, afterUpdate } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 	import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
 
+	import Icon from './Icon.svelte'
 	import CheckboxControl from './CheckboxControl.svelte'
 
 	export let name = ''
@@ -75,8 +75,8 @@
 		class:text-xs="{focusedOrContainsValue || isOpen}"
 		class:text-gray-700="{!focused}"
 		class:dark:text-gray-200="{!focused}"
-		class:text-blue-700="{focusedAndValidOrPristine}"
-		class:dark:text-blue-500="{focusedAndValidOrPristine}"
+		class:text-primary-700="{focusedAndValidOrPristine}"
+		class:dark:text-primary-500="{focusedAndValidOrPristine}"
 		class:text-red-600="{dirtyAndInvalid && (focused || isOpen)}"
 		class:dark:text-red-500="{dirtyAndInvalid && (focused || isOpen)}"
 		for="{name + randomSuffix}"
@@ -88,9 +88,9 @@
 		class:border-2="{focused || isOpen}"
 		class:border-gray-400="{pristineOrValid}"
 		class:dark:border-gray-700="{pristineOrValid}"
-		class:border-blue-600="{focusedAndValidOrPristine ||
+		class:border-primary-600="{focusedAndValidOrPristine ||
 			(isOpen && !dirtyAndInvalid)}"
-		class:dark:border-blue-500="{focusedAndValidOrPristine ||
+		class:dark:border-primary-500="{focusedAndValidOrPristine ||
 			(isOpen && !dirtyAndInvalid)}"
 		class:border-red-600="{dirtyAndInvalid}"
 		class:dark:border-red-500="{dirtyAndInvalid}"
@@ -121,7 +121,7 @@
 			on:click|preventDefault="{() => (isOpen = !isOpen)}"
 		>
 			<Icon
-				class="fa-icon {isOpen ? 'opacity-100' : 'opacity-70'}"
+				classes="{isOpen ? 'opacity-100' : 'opacity-70'}"
 				icon="{faCaretDown}"
 			/>
 		</button>
@@ -138,12 +138,13 @@
 		data-test="{name}-options"
 		class:hidden="{!isOpen}"
 		class="absolute left-0 w-full py-2 bg-white dark:bg-gray-800 border-b-2 rounded shadow-md border-2 z-10 border-t-0 rounded-tl-none rounded-tr-none"
-		class:border-blue-600="{focusedAndValidOrPristine || !dirtyAndInvalid}"
+		class:border-primary-600="{focusedAndValidOrPristine ||
+			!dirtyAndInvalid}"
 		class:border-red-600="{dirtyAndInvalid}"
 	>
 		{#each options as option (option.name)}
 			<div
-				class="block px-3 py-1 rounded-none font-normal hover:text-white dark:hover:text-gray-800 text-gray-800 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500"
+				class="block px-3 py-1 rounded-none font-normal hover:text-white dark:hover:text-gray-800 text-gray-800 dark:text-gray-200 hover:bg-primary-600 dark:hover:bg-primary-500"
 			>
 				<CheckboxControl
 					checked="{value.includes(option.value)}"
@@ -160,7 +161,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-test="{name}-error" class="flex items-center">
-				<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+				<Icon classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}

generators/client/templates/svelte/src/main/webapp/app/components/account/Password.svelte.ejs

@@ -1,8 +1,8 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 
 	import InputControl from '../InputControl.svelte'
+	import Icon from '../Icon.svelte'
 
 	export let name = 'password'
 	export let label = 'Password'
@@ -38,7 +38,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-test="{name}-error" class="flex items-center">
-				<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+				<Icon classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}

generators/client/templates/svelte/src/main/webapp/app/components/account/PasswordConfirm.svelte.ejs

@@ -1,9 +1,9 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 
 	import Password from './Password.svelte'
+	import Icon from '../Icon.svelte'
 
 	export let label = 'Password'
 	export let name = 'password'
@@ -59,10 +59,10 @@
 >
 	<div data-test="{name}Confirm-error" class="flex items-center">
 		{#if confirmPasswordMismatch}
-			<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+			<Icon classes="mr-2" icon="{faExclamationCircle}" />
 			Password and its confirmation do not match
 		{:else if dirty && !valid}
-			<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+			<Icon classes="mr-2" icon="{faExclamationCircle}" />
 			{message}
 		{:else}&nbsp;{/if}
 	</div>

generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserDeleteModal.svelte.ejs

@@ -1,11 +1,10 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-
-	import Icon from 'fa-svelte'
 	import { faBan } from '@fortawesome/free-solid-svg-icons/faBan'
 	import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'
 
 	import Button from '../../Button.svelte'
+	import Icon from '../../Icon.svelte'
 	import Modal from '../../Modal.svelte'
 
 	export let id = ''
@@ -17,19 +16,19 @@
 	<div slot="footer">
 		<Button
 			name="cancelBtn"
-			role="secondary"
+			role="neutral"
 			classes="mr-4"
 			on:click="{() => dispatch('close')}"
 		>
-			<Icon class="fa-icon mr-2" icon="{faBan}" />Cancel
+			<Icon classes="mr-2" icon="{faBan}" />Cancel
 		</Button>
 
 		<Button
 			name="deleteUserBtn"
 			role="danger"
 			on:click="{() => dispatch('deleteUser', { id })}"
 		>
-			<Icon class="fa-icon mr-2" icon="{faTrashAlt}" />Delete
+			<Icon classes="mr-2" icon="{faTrashAlt}" />Delete
 		</Button>
 	</div>
 </Modal>

generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserForm.svelte.ejs

@@ -1,10 +1,10 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faBan } from '@fortawesome/free-solid-svg-icons/faBan'
 	import { faSave } from '@fortawesome/free-solid-svg-icons/faSave'
 
 	import Button from '../../Button.svelte'
+	import Icon from '../../Icon.svelte'
 	import InputControl from '../../InputControl.svelte'
 	import SelectControl from '../../SelectControl.svelte'
 	import CheckboxControl from '../../CheckboxControl.svelte'
@@ -177,10 +177,10 @@
 		<div class="mr-4">
 			<Button
 				name="cancelBtn"
-				role="secondary"
+				role="neutral"
 				on:click="{() => dispatch('cancel')}"
 			>
-				<Icon class="fa-icon mr-2" icon="{faBan}" />Cancel
+				<Icon classes="mr-2" icon="{faBan}" />Cancel
 			</Button>
 		</div>
 		<div>
@@ -190,7 +190,7 @@
 				on:click="{() => dispatch('saveorupdate', { ...user })}"
 				disabled="{!validForm}"
 			>
-				<Icon class="fa-icon mr-2" icon="{faSave}" />
+				<Icon classes="mr-2" icon="{faSave}" />
 				{user.id ? 'Update ' : 'Create '}
 				user account
 			</Button>

generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserListActions.svelte.ejs

@@ -1,12 +1,12 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
 	import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt'
 	import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'
 	import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn'
 	import { faToggleOff } from '@fortawesome/free-solid-svg-icons/faToggleOff'
 
 	import Button from '../../Button.svelte'
+	import Icon from '../../Icon.svelte'
 	import { createEventDispatcher } from 'svelte'
 
 	export let user
@@ -40,7 +40,7 @@
 			})
 		}}"
 	>
-		<Icon class="fa-icon" icon="{activationIcon}" />
+		<Icon icon="{activationIcon}" />
 	</Button>
 	<Button
 		name="viewUserBtn"
@@ -53,7 +53,7 @@
 				id: user.login,
 			})}"
 	>
-		<Icon class="fa-icon" icon="{faEye}" />
+		<Icon icon="{faEye}" />
 	</Button>
 	<Button
 		name="editUserBtn"
@@ -67,7 +67,7 @@
 				id: user.login,
 			})}"
 	>
-		<Icon class="fa-icon" icon="{faPencilAlt}" />
+		<Icon icon="{faPencilAlt}" />
 	</Button>
 	<Button
 		name="deleteUserBtn"
@@ -81,6 +81,6 @@
 				id: user.login,
 			})}"
 	>
-		<Icon class="fa-icon" icon="{faTrashAlt}" />
+		<Icon icon="{faTrashAlt}" />
 	</Button>
 </div>

generators/client/templates/svelte/src/main/webapp/app/components/layout/AccountMenu.svelte.ejs

@@ -1,12 +1,13 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { goto } from '@sapper/app'
 	import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt'
 	import { faLock } from '@fortawesome/free-solid-svg-icons/faLock'
 	import { faWrench } from '@fortawesome/free-solid-svg-icons/faWrench'
 	import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
 	import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'
+
 	import MenuItem from './MenuItem.svelte'
+	import Icon from '../Icon.svelte'
 
 	import auth from '../auth/auth-store.js'
 <%_ if (authenticationType === 'session') { _%>
@@ -37,7 +38,7 @@
 	<div
 		class="px-2 py-1 sm:py-0 flex justify-start items-center rounded
 			sm:rounded-none font-semibold hover:text-white hover:bg-gray-700
-			sm:hover:bg-transparent focus:outline-none focus:ring"
+			sm:hover:bg-transparent focus:outline-none focus:ring focus:ring-primary-500"
 	>
 		<button
 			aria-label="Account Menu"
@@ -46,12 +47,12 @@
 			class="sm:z-10 sm:h-8 sm:w-8 sm:flex sm:justify-center
 				sm:items-center sm:rounded-full sm:overflow-hidden border-0
 				sm:border-2 sm:border-gray-600 text-gray-400 focus:text-white
-				focus:outline-none focus:border-white focus:ring"
+				focus:outline-none focus:border-white focus:ring focus:ring-primary-500"
 		>
-			<Icon class="fa-icon" icon="{faUser}" />
+			<Icon icon="{faUser}" />
 			<span class="sm:hidden">{$auth.login}</span>
 			<span class="sm:absolute sm:pl-12">
-				<Icon class="fa-icon" icon="{faCaretDown}" />
+				<Icon icon="{faCaretDown}" />
 			</span>
 		</button>
 	</div>
@@ -72,18 +73,18 @@
 			testId="svlChgPwdLink"
 			link="/account/password"
 			on:click="{() => (isOpen = false)}"
-			><Icon class="fa-icon sm:mr-1" icon="{faLock}" />
+			><Icon classes="sm:mr-1" icon="{faLock}" />
 			Change Password
 		</MenuItem>
 		<MenuItem
 			testId="svlSettingsLink"
 			link="/account/settings"
 			on:click="{() => (isOpen = false)}"
-			><Icon class="fa-icon sm:mr-1" icon="{faWrench}" />
+			><Icon classes="sm:mr-1" icon="{faWrench}" />
 			Settings
 		</MenuItem>
 		<MenuItem testId="svlSignoutLink" link="/" on:click="{logout}"
-			><Icon class="fa-icon sm:mr-1" icon="{faSignOutAlt}" />
+			><Icon classes="sm:mr-1" icon="{faSignOutAlt}" />
 			Sign out
 		</MenuItem>
 	</div>