Migrated to Tailwind v4

package.json

@@ -18,12 +18,12 @@
 		"@sveltejs/kit": "^2.5.27",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/vite": "^4.1.11",
 		"@types/cytoscape": "^3.19.16",
 		"@types/cytoscape-dagre": "^2.3.3",
 		"@types/cytoscape-euler": "^1.2.3",
 		"@typescript-eslint/eslint-plugin": "^7.0.0",
 		"@typescript-eslint/parser": "^6.21.0",
-		"autoprefixer": "^10.4.17",
 		"chart.js": "^4.4.1",
 		"cytoscape": "^3.28.1",
 		"cytoscape-cola": "^2.5.1",
@@ -36,12 +36,12 @@
 		"postcss": "^8.4.33",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.5.11",
+		"prettier-plugin-tailwindcss": "^0.6.14",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-headlessui": "^0.0.46",
 		"svelte-transition": "^0.0.17",
-		"tailwindcss": "^3.4.13",
+		"tailwindcss": "^4.1.11",
 		"tslib": "^2.6.2",
 		"typescript": "^5.5.0",
 		"vite": "^5.4.4"

src/app.css

@@ -1,3 +1,29 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+
+@theme {
+	--color-clouditor: #007fc3;
+	--color-clouditor-light: #008cd7;
+
+	--font-sans: InterVariable, sans-serif;
+	--font-sans--font-feature-settings: 'cv11', 'ss01';
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentcolor);
+	}
+}

src/lib/api/discovery.ts

@@ -1,13 +1,9 @@
-
 import { clouditorize } from './util';
 
-
 export interface StartDiscoveryResponse {
 	successful: boolean;
 }
 
-
-
 export interface HttpEndpoint {
 	transportEncryption?: TransportEncryption;
 }
@@ -19,7 +15,6 @@ export interface TransportEncryption {
 	tlsVersion: string;
 }
 
-
 export async function startDiscovery(): Promise<boolean> {
 	const apiUrl = clouditorize(`/v1/discovery/start`);
 
@@ -34,5 +29,3 @@ export async function startDiscovery(): Promise<boolean> {
 			return response.successful;
 		});
 }
-
-

src/lib/api/evaluation.ts

@@ -44,9 +44,7 @@ export async function startEvaluation(auditScope: AuditScope): Promise<StartEval
 }
 
 export async function stopEvaluation(auditScope: AuditScope): Promise<{}> {
-	const apiUrl = clouditorize(
-		`/v1/evaluation/evaluate/${auditScope.id}/stop`
-	);
+	const apiUrl = clouditorize(`/v1/evaluation/evaluate/${auditScope.id}/stop`);
 
 	return fetch(apiUrl, {
 		method: 'POST',

src/lib/api/evidence_store.ts

@@ -1,16 +1,14 @@
 import { throwError } from './errors';
 import { clouditorize } from './util';
 
-
 export interface GraphEdge {
 	id: string;
 	source: string;
 	target: string;
-    type: string;
+	type: string;
 }
 
 export interface ListGraphEdgesRequest {
-
 	orderBy?: string;
 	pageSize?: number;
 	asc?: boolean;
@@ -28,26 +26,25 @@ export interface ListResourcesResponse {
 	results: Resource[];
 }
 
-
 export interface Filter {
 	targetOfEvaluationId?: string;
 	type?: string;
 }
 
 export interface ResourceProperties {
-    name: string;
-    raw: string;
-    type: string[];
-    serviceId: string;
-    id: string;
-    labels: object;
+	name: string;
+	raw: string;
+	type: string[];
+	serviceId: string;
+	id: string;
+	labels: object;
 }
 
 export interface Resource {
-    id: string;
-    targetOfEvaluationId: string;
-    resourceType: string;
-    properties: ResourceProperties;
+	id: string;
+	targetOfEvaluationId: string;
+	resourceType: string;
+	properties: ResourceProperties;
 }
 
 export async function listResources(
@@ -77,7 +74,7 @@ export async function listResources(
 }
 
 export async function listGraphEdges(fetch = window.fetch): Promise<GraphEdge[]> {
-	const apiUrl = clouditorize(`/v1experimental/evidence/graph/edges`);//?pageSize=1500`);
+	const apiUrl = clouditorize(`/v1experimental/evidence/graph/edges`); //?pageSize=1500`);
 
 	return fetch(apiUrl, {
 		method: 'GET',
@@ -90,4 +87,4 @@ export async function listGraphEdges(fetch = window.fetch): Promise<GraphEdge[]>
 		.then((response: ListGraphEdgesResponse) => {
 			return response.edges;
 		});
-}
+}

src/lib/api/orchestrator.ts

@@ -375,9 +375,7 @@ export async function removeTargetOfEvaluation(targetId: string): Promise<void>
  *
  * @returns an array of {@link TargetOfEvaluation}s.
  */
-export async function listTargetsOfEvaluation(
-	fetch = window.fetch
-): Promise<TargetOfEvaluation[]> {
+export async function listTargetsOfEvaluation(fetch = window.fetch): Promise<TargetOfEvaluation[]> {
 	const apiUrl = clouditorize(`/v1/orchestrator/targets_of_evaluation`);
 
 	return fetch(apiUrl, {

src/lib/components/ActivityItem.svelte

@@ -24,7 +24,7 @@
 <li>
 	<div class="relative pb-8">
 		{#if !last}
-			<span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
+			<span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
 		{/if}
 		<div class="relative flex space-x-3">
 			<div>
@@ -41,7 +41,7 @@
 						<a href={event.href} class="font-medium text-gray-900">{event.target}</a>
 					</p>
 				</div>
-				<div class="whitespace-nowrap text-right text-sm text-gray-500">
+				<div class="text-right text-sm whitespace-nowrap text-gray-500">
 					<time datetime={event.datetime}>{event.date}</time>
 				</div>
 			</div>

src/lib/components/AddEvaluationResultDialog.svelte

@@ -42,7 +42,7 @@
 			leaveFrom="opacity-100"
 			leaveTo="opacity-0"
 		>
-			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+			<div class="bg-opacity-75 fixed inset-0 bg-gray-500 transition-opacity"></div>
 		</Transition>
 		<div class="fixed inset-0 z-10 overflow-y-auto">
 			<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
@@ -55,12 +55,12 @@
 					leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 				>
 					<div
-						class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+						class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
 					>
 						<div>
 							<div class="space-y-12">
 								<div class="">
-									<div class="text-base font-semibold leading-7 text-gray-900">
+									<div class="text-base leading-7 font-semibold text-gray-900">
 										Provide a manual evaluation result
 									</div>
 									<p class="mt-1 text-sm leading-6 text-gray-600">
@@ -69,7 +69,7 @@
 									</p>
 									<div class="mt-2 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
 										<div class="sm:col-span-4">
-											<label for="name" class="block text-sm font-medium leading-6 text-gray-900">
+											<label for="name" class="block text-sm leading-6 font-medium text-gray-900">
 												Name
 											</label>
 											<div class="mt-2">
@@ -78,22 +78,22 @@
 													name="name"
 													id="name"
 													autocomplete="name"
-													class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-clouditor sm:text-sm sm:leading-6"
+													class="focus:ring-clouditor block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
 													bind:value={name}
 												/>
 											</div>
 										</div>
 
 										<div class="col-span-full">
-											<label for="about" class="block text-sm font-medium leading-6 text-gray-900">
+											<label for="about" class="block text-sm leading-6 font-medium text-gray-900">
 												Comment
 											</label>
 											<div class="mt-2">
 												<textarea
 													id="about"
 													name="about"
 													rows="3"
-													class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-clouditor sm:text-sm sm:leading-6"
+													class="focus:ring-clouditor block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
 													bind:value={comment}
 												></textarea>
 											</div>
@@ -106,15 +106,15 @@
 										<div class="sm:col-span-4">
 											<label
 												for="validity"
-												class="block text-sm font-medium leading-6 text-gray-900">Validity</label
+												class="block text-sm leading-6 font-medium text-gray-900">Validity</label
 											>
 											<div class="mt-2">
 												<input
 													type="text"
 													name="first-name"
 													id="first-name"
 													autocomplete="given-name"
-													class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-clouditor sm:text-sm sm:leading-6"
+													class="focus:ring-clouditor block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
 													value="1 month"
 													disabled
 												/>
@@ -124,14 +124,14 @@
 									<div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
 										<button
 											type="button"
-											class="inline-flex w-full justify-center rounded-md bg-clouditor px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-clouditor-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-clouditor sm:col-start-2"
+											class="bg-clouditor hover:bg-clouditor-light focus-visible:outline-clouditor inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid sm:col-start-2"
 											onclick={submit}
 										>
 											Save
 										</button>
 										<button
 											type="button"
-											class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
+											class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 sm:col-start-1 sm:mt-0"
 											onclick={dialog.close}
 										>
 											Cancel

src/lib/components/AssuranceLevelPopover.svelte

@@ -53,7 +53,7 @@
 			<div
 				class="w-screen max-w-sm flex-auto rounded-3xl bg-white p-4 text-sm leading-6 shadow-lg ring-1 ring-gray-900/5"
 			>
-				<div class="ml-4 mr-4 mt-4">
+				<div class="mt-4 mr-4 ml-4">
 					<p class="font-medium text-gray-900">Please choose an assurance level</p>
 					<p class="text-gray-500">
 						The selected catalog requires the selection of an assurance level.

src/lib/components/Button.svelte

@@ -19,7 +19,7 @@
 <button
 	type="button"
 	class="{$$props['disabled'] ? 'bg-gray-500' : 'bg-clouditor hover:bg-clouditor-light'}
-    rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-clouditor
+    focus-visible:outline-clouditor rounded-md px-3 py-2 text-sm font-semibold text-white shadow-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid
     {clazz ?? ''}
     "
 	on:click

src/lib/components/CatalogComplianceItem.svelte

@@ -31,7 +31,7 @@
 <li class="overflow-hidden rounded-xl border border-gray-200">
 	<div class="flex items-center justify-between gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
 		<a href={'/cloud/' + auditScope.targetOfEvaluationId + '/compliance/' + catalog.id}>
-			<div class="text-sm font-medium leading-6 text-gray-900">{catalog.name}</div>
+			<div class="text-sm leading-6 font-medium text-gray-900">{catalog.name}</div>
 			<div class="text-sm text-gray-500">{catalog.description}</div>
 		</a>
 		<div class="flex gap-x-1.5">

src/lib/components/ComplianceChart.svelte

@@ -147,7 +147,7 @@
 				aria-describedby="merge-description-{auditScope.catalogId}"
 				name="merge-{auditScope.catalogId}"
 				type="checkbox"
-				class="h-4 w-4 rounded border-gray-300 text-clouditor focus:ring-clouditor"
+				class="text-clouditor focus:ring-clouditor h-4 w-4 rounded-sm border-gray-300"
 				bind:checked={merge}
 			/>
 		</div>
@@ -161,5 +161,5 @@
 			</span>
 		</div>
 	</div>
-	<canvas id="chart" bind:this={canvas} class="ml-auto mr-auto h-72 w-72"></canvas>
+	<canvas id="chart" bind:this={canvas} class="mr-auto ml-auto h-72 w-72"></canvas>
 </div>

src/lib/components/ComplianceStatusSelect.svelte

@@ -42,17 +42,17 @@
 <div class="mt-2">
 	<div class="sr-only">Change published status</div>
 	<div class="relative">
-		<div class="inline-flex divide-x {$listbox.selected.divideColor} rounded-md shadow-sm">
+		<div class="inline-flex divide-x {$listbox.selected.divideColor} rounded-md shadow-xs">
 			<div
-				class="inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-white shadow-sm {$listbox
+				class="inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-white shadow-xs {$listbox
 					.selected.bgColor}"
 			>
 				<Icon src={Check} class="-ml-0.5 h-5 w-5" aria-hidden="true" />
 				<p class="text-sm font-semibold">{$listbox.selected.name}</p>
 			</div>
 			<div use:listbox.button>
 				class="inline-flex items-center rounded-l-none rounded-r-md {$listbox.selected.bgColor}
-				{$listbox.selected.hoverColor} p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50"
+				{$listbox.selected.hoverColor} p-2 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50"
 				>
 				<span class="sr-only">Change published status</span>
 				<Icon src={ChevronDown} class="h-5 w-5 text-white" aria-hidden="true" />
@@ -67,7 +67,7 @@
 		>
 			<ul
 				use:listbox.items
-				class="absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+				class="ring-opacity-5 absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black focus:outline-hidden"
 			>
 				{#each publishingOptions as option (option.name)}
 					{@const active = $listbox.active === option.status}
@@ -76,7 +76,7 @@
 						use:listbox.item={{ value: option.status }}
 						class="{active
 							? 'bg-clouditor text-white'
-							: 'text-gray-900'} cursor-default select-none p-4 text-sm"
+							: 'text-gray-900'} cursor-default p-4 text-sm select-none"
 					>
 						<div class="flex flex-col">
 							<div class="flex justify-between">

src/lib/components/ControlComplianceItem.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div class="flex">
-	<div class="mr-4 flex-shrink-0">
+	<div class="mr-4 shrink-0">
 		{#if result.status == 'EVALUATION_STATUS_COMPLIANT'}
 			<Icon src={CheckCircle} theme="solid" class="h-8 w-8 text-green-800" />
 		{:else if result.status == 'EVALUATION_STATUS_COMPLIANT_MANUALLY'}