@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/error-page/ErrorPage.svelte

@@ -19,11 +19,11 @@
 	};
 </script>
 
-<section class="feedback-container">
+<section class="feedback-container spi-text-regular-2">
 	<img src={FeedbackIcon} class="feedback-icon" alt="Feedback icon" />
 
 	<div class="feedback-detail">
-		<h1>{title || errorTitle[status]}</h1>
+		<h1 class="spi-text-bold-6">{title || errorTitle[status]}</h1>
 		{#if status === 404}
 			<div>
 				<p>We couldn’t find the page:</p>
@@ -53,17 +53,13 @@
 		margin-left: auto;
 		margin-right: auto;
 		width: 350px;
-		padding: 24px;
-		gap: 32px;
-		border-radius: 16px;
-		background-color: #fff;
-		box-shadow:
-			0px 1px 16px rgba(107, 113, 128, 0.1),
-			0px 1px 3px rgba(107, 113, 128, 0.2);
+		padding: var(--spi-size-6);
+		gap: var(--spi-size-8);
+		border-radius: var(--spi-rounded-2xl);
+		background-color: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-card);
 		align-items: center;
 		text-align: center;
-		font-size: 14px;
-		line-height: 20px;
 	}
 
 	.feedback-icon {
@@ -74,12 +70,7 @@
 	.feedback-detail {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-	}
-
-	.feedback-detail > h1 {
-		font-size: 24px;
-		font-weight: bold;
+		gap: var(--spi-size-2);
 	}
 
 	.feedback-detail .link {
@@ -94,6 +85,6 @@
 	}
 
 	.link {
-		color: #472aff;
+		color: var(--spi-color-text-link);
 	}
 </style>

package/dist/components/footer/Footer.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
+	import FooterLogo from './FooterLogo.svelte';
+
 	interface Props {
 		homeUrl?: string;
-		logoUrl?: string;
 		documentationUrl?: string;
 	}
 
 	let {
 		homeUrl = '/',
-		logoUrl = '/softwareone-logo-white.svg',
 		documentationUrl = 'https://softwareone-internal.atlassian.net/wiki/spaces/ATM/pages/17961910574/Services+Portal+BackOffice'
 	}: Props = $props();
 </script>
 
-<footer class="footer-section">
+<footer class="footer-section spi-text-regular-2">
 	<a href={homeUrl} title="Home">
-		<img alt="SoftwareOne logo" class="logo-image" src={logoUrl} />
+		<FooterLogo />
 	</a>
 	<ul class="links">
 		<li>
@@ -39,25 +39,20 @@
 
 <style>
 	.footer-section {
-		background-color: #25282d;
+		background-color: var(--spi-color-neutral-darkest);
 		display: flex;
-		gap: 50px;
+		gap: var(--spi-size-12);
 		align-items: center;
 		justify-content: center;
-		padding: 10px;
-		color: white;
-	}
-
-	.logo-image {
-		width: 80px;
+		padding: var(--spi-size-3);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.footer-section .links,
 	.footer-section .legal {
 		display: flex;
 		flex-direction: column;
-		gap: 3px;
-		font-size: 14px;
+		gap: var(--spi-size-1);
 	}
 
 	.footer-section a:hover {

package/dist/components/footer/Footer.svelte.d.ts

@@ -1,6 +1,5 @@
 interface Props {
     homeUrl?: string;
-    logoUrl?: string;
     documentationUrl?: string;
 }
 declare const Footer: import("svelte").Component<Props, {}, "">;

package/dist/components/footer/FooterLogo.svelte

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="32" viewBox="0 0 65 24" fill="none">
+	<path
+		d="M22.6371 14.1927C21.6122 19.5775 16.8887 23.4706 11.4225 23.4706C5.12455 23.4706 0 18.3245 0 12C0 5.66061 5.12455 0.529419 11.4225 0.529419C16.9036 0.529419 21.6122 4.42256 22.6371 9.80732V1.17082H29.1282V3.82591C30.9404 1.54372 32.9604 0.529419 35.649 0.529419C40.3725 0.529419 43.2987 3.96015 43.2987 9.509V9.91173C44.1899 4.2734 48.5866 0.529419 54.3499 0.529419C60.6776 0.529419 65 5.31753 65 12.2983V13.7452H49.6115C50.072 16.9075 51.9138 18.7123 54.6766 18.7123C56.6967 18.7123 58.1524 17.7726 58.598 16.1616H64.7029C63.8414 20.547 59.8012 23.4706 54.5875 23.4706C48.7351 23.4706 44.2047 19.7117 43.2987 14.1032V22.8292H36.7036V10.1951C36.7036 7.48039 35.3668 5.97385 32.9753 5.97385C30.7324 5.97385 29.247 7.64447 29.247 10.1951V22.8292H22.6371V14.1927ZM58.5535 9.56866C58.1376 6.74949 56.5334 5.10871 54.2162 5.10871C51.8841 5.10871 50.2502 6.71966 49.7155 9.56866H58.5535Z"
+		fill="white"
+	/>
+	<path
+		d="M0.88623 12.3732H1.7069C1.75786 12.6506 1.91609 12.7718 2.23792 12.7718C2.50612 12.7718 2.68312 12.6344 2.68312 12.4244C2.68312 12.2708 2.56512 12.1712 2.32911 12.1308L2.00996 12.0769C1.27779 11.953 0.958643 11.681 0.958643 11.1801C0.958643 10.6495 1.47357 10.2752 2.20306 10.2752C2.93791 10.2752 3.37774 10.5741 3.47697 11.1451H2.66435C2.6268 10.9215 2.4632 10.8003 2.19769 10.8003C1.94827 10.8003 1.76322 10.9458 1.76322 11.1424C1.76322 11.2878 1.87854 11.3686 2.14674 11.4171L2.49271 11.479C3.20073 11.6056 3.51184 11.8884 3.51184 12.4055C3.51184 12.963 3.00495 13.3373 2.24865 13.3373C1.43871 13.3373 0.942551 12.9872 0.88623 12.3732ZM3.64862 11.8157C3.64862 10.9242 4.29228 10.2752 5.18 10.2752C6.06235 10.2752 6.68456 10.9 6.68456 11.7914C6.68456 12.6937 6.04894 13.3373 5.15854 13.3373C4.26814 13.3373 3.64862 12.7125 3.64862 11.8157ZM5.81562 11.7968C5.81562 11.2609 5.56351 10.9215 5.16391 10.9215C4.76966 10.9215 4.51756 11.2663 4.51756 11.8022C4.51756 12.3516 4.7643 12.691 5.16391 12.691C5.5662 12.691 5.81562 12.3462 5.81562 11.7968ZM6.63897 10.364H7.11099V10.084C7.11099 9.43758 7.406 9.1521 8.06844 9.1521C8.17839 9.1521 8.31249 9.16287 8.38758 9.17634V9.7877C8.33931 9.785 8.33931 9.785 8.28031 9.785C8.03893 9.785 7.95848 9.85503 7.95848 10.0705V10.364H8.79524V9.46182H9.64005V10.364H10.9596L11.2653 11.7376C11.3082 11.9342 11.3511 12.1443 11.386 12.3409C11.4289 12.1362 11.4798 11.9315 11.5308 11.7403L11.8875 10.3856H12.5794L12.9415 11.7403C12.9844 11.9073 13.0354 12.1227 13.0783 12.3058C13.1292 12.0284 13.1561 11.8938 13.1909 11.7403L13.4967 10.364H14.3307L13.5154 13.2485H12.7028L12.2174 11.4009L11.7427 13.2485H10.9059L10.273 10.9673H9.64005V12.2816C9.64005 12.5294 9.72855 12.6129 9.98601 12.6129C10.0611 12.6129 10.1013 12.6102 10.1764 12.5967V13.2215C10.0343 13.2485 9.87337 13.2673 9.74464 13.2673C9.06343 13.2673 8.79524 13.0142 8.79524 12.3705V10.9673H7.95848V13.2485H7.11099V10.9673H6.63897V10.364ZM14.1725 12.5051C14.1725 11.9827 14.5104 11.7187 15.3767 11.5706C15.8433 11.4925 16.0123 11.3848 16.0123 11.1639C16.0123 10.9431 15.8487 10.8084 15.5778 10.8084C15.2909 10.8084 15.1273 10.9404 15.1085 11.1909H14.3281C14.3897 10.5984 14.8323 10.2752 15.5859 10.2752C16.4173 10.2752 16.8276 10.6765 16.8276 11.4925V12.6371C16.8276 12.9926 16.8464 13.095 16.9403 13.2485H16.1249C16.0847 13.1515 16.0579 13.0411 16.0472 12.893C15.8246 13.1865 15.5376 13.3212 15.1407 13.3212C14.5399 13.3212 14.1725 13.0115 14.1725 12.5051ZM15.5376 12.0069C15.1353 12.0877 14.9851 12.2008 14.9851 12.4244C14.9851 12.6506 15.13 12.7799 15.3874 12.7799C15.7763 12.7799 16.015 12.5321 16.015 12.1362V11.8669C15.8916 11.9261 15.7897 11.9557 15.5376 12.0069ZM17.2487 10.364H18.0881V10.8057C18.2705 10.4745 18.5092 10.3156 18.831 10.3156C18.8686 10.3156 18.9463 10.3236 19.0107 10.3371V11.0427C18.9571 11.0293 18.9007 11.0239 18.7827 11.0239C18.3697 11.0239 18.1042 11.2905 18.1042 11.7053V13.2485H17.2487V10.364ZM18.9839 11.8157C18.9839 10.8973 19.5846 10.2752 20.4724 10.2752C21.3172 10.2752 21.8857 10.9108 21.8857 11.8615V12.0096H19.8341C19.8904 12.489 20.1371 12.761 20.5153 12.761C20.7995 12.761 20.9846 12.6263 21.0463 12.3813H21.8455C21.7302 12.9549 21.1938 13.3373 20.5045 13.3373C19.6007 13.3373 18.9839 12.7206 18.9839 11.8157ZM21.0436 11.506C20.99 11.067 20.7861 10.8327 20.4563 10.8327C20.1264 10.8327 19.9199 11.0643 19.8501 11.506H21.0436Z"
+		fill="black"
+	/>
+</svg>
+
+<style>
+	svg {
+		display: block;
+	}
+</style>

package/dist/components/footer/FooterLogo.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FooterLogo;
+type FooterLogo = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FooterLogo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/form/Form.svelte

@@ -12,8 +12,8 @@
 
 	import { addToast, Spinner } from '../../index.js';
 	import { getFormContext } from './context.js';
-	import { isEqual } from './utils.js';
 	import type { FormError } from './types.js';
+	import { isEqual } from './utils.js';
 
 	type Schema = z.infer<typeof schema>;
 	type FormEncodingType = 'application/x-www-form-urlencoded' | 'multipart/form-data';

package/dist/components/header/Header.svelte

@@ -92,7 +92,7 @@
 					aria-label="Waffle Component"
 					aria-expanded={showWaffle}
 				>
-					<span class="material-icons icon-span">apps</span>
+					<span class="material-icons icon-span spi-text-regular-6">apps</span>
 				</button>
 				<Waffle items={waffleItems} bind:showWaffle />
 			{/if}
@@ -104,7 +104,7 @@
 					aria-label="menu button"
 					aria-expanded={showMenu}
 				>
-					<span class="material-icons icon-span menu-icon">menu</span>
+					<span class="material-icons icon-span menu-icon spi-text-regular-6">menu</span>
 				</button>
 				<Menu {menuItems} bind:showMenu />
 			{/if}
@@ -112,7 +112,7 @@
 				<HeaderLogo />
 			</a>
 		</div>
-		<h2 class="header-title">
+		<h2 class="header-title spi-text-medium-6">
 			{title}
 		</h2>
 	</nav>
@@ -126,10 +126,12 @@
 				aria-label="Announcement"
 				aria-expanded={showAnnouncement}
 			>
-				<span class="material-icons-outlined icon-span menu-icon">notifications</span>
+				<span class="material-icons-outlined icon-span menu-icon spi-text-regular-6"
+					>notifications</span
+				>
 				{#if unreadCount > 0}
 					<div class="notification-badge">
-						<span class="badge-count">{unreadCount}</span>
+						<span class="badge-count spi-text-medium-1">{unreadCount}</span>
 					</div>
 				{/if}
 			</button>
@@ -144,66 +146,61 @@
 </header>
 
 <style>
+	.header-container {
+		display: flex;
+		gap: var(--spi-size-6);
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--spi-size-5) var(--spi-size-4);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-card);
+		position: relative;
+		z-index: 50;
+	}
+
+	.header-section {
+		display: flex;
+		align-items: center;
+		gap: var(--spi-size-8);
+	}
+
 	.header-button {
 		position: relative;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border-radius: 50%;
+		border-radius: var(--spi-rounded-full);
 		background: transparent;
 		z-index: 40;
 		cursor: pointer;
 		border: none;
-		width: 40px;
-		height: 40px;
-		transition: background-color 0.2s ease-in-out;
-		padding: 8px;
+		width: var(--spi-size-10);
+		height: var(--spi-size-10);
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-in-out);
+		padding: var(--spi-size-2);
 	}
 
 	.header-button:hover {
-		background: #e0e5e8;
+		background: var(--spi-color-surface-muted);
 	}
 
 	.header-button.active {
-		background: #fff;
-		color: #374151;
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-text-secondary);
 	}
 
 	.icon-span {
-		font-size: 24px;
-		color: #6b7180;
-	}
-
-	.header-container {
-		display: flex;
-		gap: 24px;
-		justify-content: space-between;
-		align-items: center;
-		padding: 20px 16px;
-		background: #fff;
-		box-shadow:
-			0 1px 3px 0 rgba(107, 113, 128, 0.2),
-			0 1px 16px 0 rgba(107, 113, 128, 0.1);
-		position: relative;
-		z-index: 50;
-	}
-
-	.header-section {
-		display: flex;
-		align-items: center;
-		gap: 32px;
+		color: var(--spi-color-text-muted);
 	}
 
 	.header-buttons-container {
 		display: flex;
 		align-items: center;
-		gap: 12px;
+		gap: var(--spi-size-3);
 	}
 
 	.header-title {
-		color: #000;
-		font-size: 24px;
-		font-weight: 500;
+		color: var(--spi-color-text-primary);
 		cursor: default;
 	}
 
@@ -214,16 +211,13 @@
 		transform: translate(5px, 2px);
 		display: flex;
 		justify-content: center;
-		background-color: #472aff;
-		border-radius: 4px;
+		background-color: var(--spi-color-primary-base);
+		border-radius: var(--spi-rounded-sm);
 		min-width: 19px;
 		padding: 0 3px;
 	}
 
 	.badge-count {
-		color: #ffffff;
-		font-weight: 500;
-		font-size: 12px;
-		line-height: 16px;
+		color: var(--spi-color-text-inverse);
 	}
 </style>

package/dist/components/header/HeaderAccount.svelte

@@ -35,8 +35,8 @@
 {#snippet profile()}
 	<Avatar text={userName} />
 	<div class="account-info">
-		<p class="account-name">{accountName}</p>
-		<p class="account-more-name">{accountDescription}</p>
+		<p class="account-name spi-text-medium-2">{accountName}</p>
+		<p class="account-more-name spi-text-regular-1">{accountDescription}</p>
 	</div>
 {/snippet}
 
@@ -70,7 +70,7 @@
 			{#each profileMenuItems as item, index (index)}
 				<li>
 					<button
-						class="account-menu-item"
+						class="account-menu-item spi-text-regular-2"
 						type="button"
 						onclick={() => {
 							onClickProfileItem(item.url);
@@ -100,21 +100,21 @@
 		display: flex;
 		width: 256px;
 		align-items: center;
-		padding: 8px;
-		gap: 16px;
+		padding: var(--spi-size-2);
+		gap: var(--spi-size-4);
 	}
 
 	.account-button {
-		border-radius: 6px;
+		border-radius: var(--spi-rounded-md);
 		border: none;
 		height: 66px;
 		background: transparent;
 		cursor: pointer;
-		transition: background-color 0.2s ease-in-out;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.account-button:hover {
-		background: #e0e5e8;
+		background: var(--spi-color-surface-muted);
 	}
 
 	.account-info {
@@ -125,23 +125,14 @@
 		word-break: break-words;
 	}
 
-	.account-name {
-		font-weight: 500;
-		font-size: 14px;
-		line-height: 20px;
-	}
-
 	.account-more-name {
-		font-weight: 400;
-		font-size: 12px;
-		color: #6b7280;
-		line-height: normal;
+		color: var(--spi-color-text-muted);
 	}
 
 	.account-backdrop {
 		position: fixed;
 		inset: 0;
-		background: rgba(243, 244, 246, 0.5);
+		background: var(--spi-color-backdrop);
 		cursor: pointer;
 		z-index: 40;
 	}
@@ -152,35 +143,32 @@
 		flex-direction: column;
 		width: 250px;
 		top: 70px;
-		gap: 8px;
-		padding: 16px;
-		background: white;
-		border: 1px solid #f3f4f6;
-		border-radius: 0 0 10px 10px;
-		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-4);
+		background: var(--spi-color-surface-default);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		border-radius: 0 0 var(--spi-rounded-xl) var(--spi-rounded-xl);
+		box-shadow: var(--spi-shadow-dropdown);
 		z-index: 40;
 	}
 
 	.account-menu-item {
 		width: 100%;
-		font-weight: 400;
-		font-size: 14px;
 		text-align: left;
-		line-height: 20px;
-		padding: 8px;
-		border-radius: 8px;
+		padding: var(--spi-size-2);
+		border-radius: var(--spi-rounded-lg);
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		transition: background-color 0.2s ease;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-default);
 	}
 
 	.account-menu-item:hover {
-		background: #f4f6f8;
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.account-menu-item:focus,
 	.account-menu-item:focus-visible {
-		background: #eaecff;
+		background: var(--spi-color-primary-lighter);
 	}
 </style>

package/dist/components/header/HeaderLoader.svelte

@@ -5,9 +5,9 @@
 </script>
 
 {#if navigating.to}
-	<!-- 
-    Loading animation for next page since svelte doesn't show any indicator. 
-     - delay 100ms because most page loads are instant, and we don't want to flash 
+	<!--
+    Loading animation for next page since svelte doesn't show any indicator.
+     - delay 100ms because most page loads are instant, and we don't want to flash
      - long 12s duration because we don't actually know how long it will take
      - exponential easing so fast loads (>100ms and <1s) still see enough progress,
        while slow networks see it moving for a full 12 seconds
@@ -21,11 +21,16 @@
 <style>
 	.navigation-loader {
 		position: fixed;
-		top: 0px;
-		right: 0px;
-		left: 0px;
-		height: 3px;
+		top: 0;
+		right: 0;
+		left: 0;
+		height: var(--spi-border-3);
 		z-index: 9999;
-		background: linear-gradient(90deg, #392d9c, #472aff, #00c9cd);
+		background: linear-gradient(
+			90deg,
+			var(--spi-color-primary-dark),
+			var(--spi-color-primary-base),
+			#00c9cd
+		);
 	}
 </style>

package/dist/components/highlight-panel/HighlightPanel.svelte

@@ -17,28 +17,33 @@
 		{#each columns as column, index (index)}
 			<div class="panel-element">
 				{#if column.type === ColumnType.Text}
-					<h2>{column.label}</h2>
-					<p>{column.value}</p>
+					<h2 class="spi-text-medium-2">{column.label}</h2>
+					<p class="spi-text-regular-2">{column.value}</p>
 					{#if column.description}
-						<p class="text-description">{column.description}</p>
+						<p class="text-description spi-text-regular-1">{column.description}</p>
 					{/if}
 				{/if}
 
 				{#if column.type === ColumnType.Status}
-					<h2>{column.label}</h2>
+					<h2 class="spi-text-medium-2">{column.label}</h2>
 					<Chips text={column.value} type={column.chipType} />
 				{/if}
 
 				{#if column.type === ColumnType.Link}
-					<h2>{column.label}</h2>
-					<a rel="noreferrer" class="link" target="_blank" href={column.url}>
+					<h2 class="spi-text-medium-2">{column.label}</h2>
+					<a
+						rel="noreferrer"
+						class="link spi-text-regular-2"
+						target="_blank"
+						href={column.url}
+					>
 						{column.value}
 					</a>
 				{/if}
 
 				{#if column.type === ColumnType.Image}
 					{@const { content, iconType } = column}
-					<h2>{column.label}</h2>
+					<h2 class="spi-text-medium-2">{column.label}</h2>
 
 					<figure class:text-right={column.alignTextRight}>
 						{#if iconType === ImageType.Default}
@@ -52,10 +57,12 @@
 						{#if column.value || column.description}
 							<div>
 								{#if column.value}
-									<p>{column.value}</p>
+									<p class="spi-text-regular-2">{column.value}</p>
 								{/if}
 								{#if column.description}
-									<p class="text-description">{column.description}</p>
+									<p class="text-description spi-text-regular-1">
+										{column.description}
+									</p>
 								{/if}
 							</div>
 						{/if}
@@ -63,7 +70,7 @@
 				{/if}
 
 				{#if column.type === ColumnType.Custom}
-					<h2>{column.label}</h2>
+					<h2 class="spi-text-medium-2">{column.label}</h2>
 					{@render column.snippet()}
 				{/if}
 			</div>
@@ -78,25 +85,13 @@
 </div>
 
 <style>
-	h2,
-	p,
-	a {
-		font-size: 14px;
-		line-height: 20px;
-	}
-
-	h2 {
-		font-weight: 500;
-	}
-
 	.text-description {
-		font-size: 12px;
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 		text-align: left;
 	}
 
 	.link {
-		color: #472aff;
+		color: var(--spi-color-text-link);
 	}
 
 	.link:hover {
@@ -106,47 +101,47 @@
 	.highlight-panel {
 		display: grid;
 		grid-template-columns: 1fr auto;
-		gap: 48px;
+		gap: var(--spi-size-12);
 	}
 
 	.panel-section-flex {
 		display: flex;
 		flex-wrap: wrap;
-		gap: 48px;
+		gap: var(--spi-size-12);
 	}
 
 	.panel-section-flex-column {
 		display: flex;
 		flex-direction: column;
-		gap: 24px;
+		gap: var(--spi-size-6);
 	}
 
 	.panel-section-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(50px, auto));
-		grid-gap: 48px;
+		grid-gap: var(--spi-size-12);
 	}
 
 	.buttons-section {
 		display: flex;
-		gap: 12px;
+		gap: var(--spi-size-3);
 		align-items: flex-start;
 	}
 
 	.panel-element h2 {
-		margin-bottom: 8px;
+		margin-bottom: var(--spi-size-2);
 	}
 
 	.panel-element img {
-		width: 40px;
-		height: 40px;
-		border-radius: 9999px;
+		width: var(--spi-size-10);
+		height: var(--spi-size-10);
+		border-radius: var(--spi-rounded-full);
 	}
 
 	.panel-element > figure {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.panel-element > figure.text-right {