flip vulnerabilities scale to get rid of tooltip

Author: andnorda

src/lib/components/VulnerabilityBadges.svelte

@@ -3,7 +3,7 @@
 	import { percentageFormatter } from '$lib/utils/formatters';
 	import { severityToColor } from '$lib/utils/vulnerabilities';
 
-	import { BodyShort, Loader, Tooltip } from '@nais/ds-svelte-community';
+	import { BodyShort, Loader } from '@nais/ds-svelte-community';
 
 	type VulnerabilitySummary =
 		| {
@@ -29,14 +29,10 @@
 <div class="vulnerability-summary">
 	{#if summary !== PendingValue}
 		{#each categories as category (category)}
-			<Tooltip content={category}>
-				<BodyShort
-					class="vulnerability-count"
-					style="background-color: {severityToColor(category)}"
-				>
-					{summary[category]}
-				</BodyShort>
-			</Tooltip>
+			<BodyShort class="vulnerability-count" style="background-color: {severityToColor(category)}">
+				{summary[category]}
+			</BodyShort>
+			<div class="category">{category}</div>
 		{/each}
 	{:else}
 		<Loader />
@@ -72,23 +68,30 @@
 {/if}
 
 <style>
+	.category {
+		text-transform: capitalize;
+	}
+
 	.vulnerability-summary {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 1px;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		align-items: center;
+		column-gap: var(--a-spacing-2);
+		row-gap: 1px;
 
-		:global(:first-child > .vulnerability-count) {
+		:global(.vulnerability-count:first-of-type) {
 			border-top-left-radius: 4px;
-			border-bottom-left-radius: 4px;
+			border-top-right-radius: 4px;
 		}
 
-		:global(:last-child > .vulnerability-count) {
-			border-top-right-radius: 4px;
+		:global(.vulnerability-count:last-of-type) {
 			border-bottom-right-radius: 4px;
+			border-bottom-left-radius: 4px;
 		}
 
 		:global(.vulnerability-count) {
 			padding: 4px 10px;
+			text-align: center;
 		}
 	}
 

src/lib/components/WorkloadsWithSBOM.svelte

@@ -407,9 +407,9 @@
 				}
 			}
 			&.HIGH {
-				background-color: var(--a-orange-200);
+				background-color: color-mix(in oklab, var(--a-red-200), var(--a-orange-200));
 				&:hover {
-					background-color: var(--a-orange-300);
+					background-color: color-mix(in oklab, var(--a-red-300), var(--a-orange-300));
 				}
 			}
 			&.MEDIUM {

src/lib/utils/vulnerabilities.ts

@@ -3,7 +3,7 @@ export function severityToColor(severity: string): string {
 		case 'critical':
 			return 'var(--a-red-200)';
 		case 'high':
-			return 'var(--a-orange-200)';
+			return 'color-mix(in oklab, var(--a-red-200), var(--a-orange-200))';
 		case 'medium':
 			return 'var(--a-orange-200)';
 		case 'low':