@softwareone/spi-sv5-library 1.14.4 → 1.15.1

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 {

package/dist/components/home/Home.svelte

@@ -9,7 +9,7 @@
 	let { title, homeItems }: Props = $props();
 </script>
 
-<h1 class="home-title">
+<h1 class="home-title spi-text-semibold-4">
 	{title}
 </h1>
 
@@ -18,8 +18,8 @@
 		<a href={homeItem.url} class="home-item">
 			<img src={homeItem.homeIcon} alt={homeItem.text} />
 			<div>
-				<h2>{homeItem.text}</h2>
-				<p>{homeItem.detail}</p>
+				<h2 class="spi-text-semibold-3">{homeItem.text}</h2>
+				<p class="spi-text-regular-2">{homeItem.detail}</p>
 			</div>
 		</a>
 	{/each}
@@ -27,20 +27,12 @@
 
 <style>
 	.home-title {
-		padding-bottom: 16px;
-		font-size: 18px;
-		line-height: 1.55;
-		font-weight: 600;
-	}
-
-	.home-container {
-		--black: #000;
-		--white: #fff;
+		padding-bottom: var(--spi-size-4);
 	}
 
 	.home-container.grid {
 		display: grid;
-		gap: 24px;
+		gap: var(--spi-size-6);
 
 		@media (width >= 640px) {
 			grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -59,45 +51,35 @@
 		display: flex;
 		max-height: 190px;
 		max-width: 770px;
-		gap: 16px;
-		padding: 12px;
-		border-radius: 16px;
-		background: var(--white);
+		gap: var(--spi-size-4);
+		padding: var(--spi-size-3);
+		border-radius: var(--spi-rounded-2xl);
+		background: var(--spi-color-surface-default);
 		transition:
-			box-shadow 0.2s ease-in-out,
-			transform 0.2s ease-in-out;
-		box-shadow:
-			0 1px 16px 0 rgba(107, 113, 128, 0.1),
-			0 1px 3px 0 rgba(107, 113, 128, 0.2);
+			box-shadow var(--spi-duration-normal) var(--spi-ease-in-out),
+			transform var(--spi-duration-normal) var(--spi-ease-in-out);
+		box-shadow: var(--spi-shadow-card);
 
 		&:hover {
 			transform: translateY(-2px);
 			box-shadow:
-				0 4px 20px 0 rgba(71, 42, 255, 0.2),
-				0 2px 6px 0 rgba(107, 113, 128, 0.25);
+				0 4px 20px 0 color-mix(in srgb, var(--spi-color-primary-light) 50%, transparent),
+				0 2px 6px 0 color-mix(in srgb, var(--spi-color-neutral-base) 50%, transparent);
 		}
 
 		> img {
-			width: 36px;
-			height: 36px;
+			width: var(--spi-size-9);
+			height: var(--spi-size-9);
 			margin: auto 0;
 			filter: invert(27%) sepia(99%) saturate(4729%) hue-rotate(240deg) brightness(101%)
 				contrast(106%);
 		}
 
 		> div {
-			color: var(--black);
+			color: var(--spi-color-text-primary);
 
 			> h2 {
-				padding-bottom: 8px;
-				font-size: 16px;
-				line-height: 1.5;
-				font-weight: 600;
-			}
-
-			> p {
-				font-size: 14px;
-				line-height: 1.42;
+				padding-bottom: var(--spi-size-2);
 			}
 		}
 	}

package/dist/components/link/Link.svelte

@@ -20,7 +20,7 @@
 
 <style>
 	.link {
-		color: var(--primary-color, #472aff);
+		color: var(--spi-color-text-link);
 		text-decoration: none;
 	}
 

package/dist/components/menu/Menu.svelte

@@ -65,7 +65,7 @@
 	.menu-backdrop {
 		position: fixed;
 		inset: 0;
-		background-color: rgba(243, 244, 246, 0.5);
+		background-color: var(--spi-color-backdrop);
 		cursor: pointer;
 		z-index: 30;
 		border: none;
@@ -73,16 +73,16 @@
 
 	.menu-nav {
 		position: absolute;
-		top: 80px;
-		left: 24px;
-		bottom: 24px;
+		top: var(--spi-size-20);
+		left: var(--spi-size-6);
+		bottom: var(--spi-size-6);
 		display: flex;
-		border: 1px solid #f3f4f6;
-		border-bottom-left-radius: 10px;
-		border-bottom-right-radius: 10px;
-		background-color: white;
-		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-		min-height: calc(100vh - 80px - 55px);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		border-bottom-left-radius: var(--spi-rounded-xl);
+		border-bottom-right-radius: var(--spi-rounded-xl);
+		background-color: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-dropdown);
+		min-height: calc(100vh - var(--spi-size-20) - 55px);
 		z-index: 40;
 		width: auto;
 	}
@@ -90,8 +90,8 @@
 	.menu-list {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
-		padding: 0.7rem;
+		gap: var(--spi-size-1);
+		padding: var(--spi-size-3);
 		width: 150px;
 		overflow-y: auto;
 		overflow-x: hidden;

package/dist/components/menu/MenuItem.svelte

@@ -23,44 +23,41 @@
 			]}
 			onclick={() => onClick?.(item)}
 		>
-			<span class="material-icons-outlined icon-span">{item.icon}</span>
-			<h2 class="item-name-span" class:hidden={isCollapsed}>{item.text}</h2>
+			<span class="material-icons-outlined icon-span spi-text-regular-5">{item.icon}</span>
+			<h2 class="item-name-span spi-text-regular-2" class:hidden={isCollapsed}>
+				{item.text}
+			</h2>
 		</a>
 	</Tooltip>
 </li>
 
 <style>
 	.item {
-		min-height: 28px;
-		padding: 8px;
-		border-radius: 8px;
+		min-height: var(--spi-size-7);
+		padding: var(--spi-size-2);
+		border-radius: var(--spi-rounded-lg);
 		justify-content: flex-start;
 		align-items: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		display: inline-flex;
 		background: none;
 		border: none;
 		cursor: pointer;
-		transition: background-color 0.2s ease;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-default);
 	}
 
 	.item-name-span {
 		text-align: left;
-		color: black;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
+		color: var(--spi-color-text-primary);
 		word-wrap: break-word;
 	}
 
 	.icon-span {
-		color: black;
-		font-size: 20px;
-		font-weight: 400;
-		line-height: 20px;
 		word-wrap: break-word;
-		border-radius: 50%;
-		transition: background-color 0.2s ease;
+		line-height: normal;
+		color: var(--spi-color-text-primary);
+		border-radius: var(--spi-rounded-full);
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-default);
 	}
 
 	.expanded {
@@ -68,34 +65,33 @@
 	}
 
 	.expanded:hover:not(.active-expanded) {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 	}
 
 	.active-expanded {
-		background-color: #eaecff;
-		color: #472aff;
+		background-color: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 		cursor: default;
 	}
 
 	.collapsed {
-		width: 68px;
 		justify-content: center;
 		position: relative;
 		width: 100%;
 	}
 
 	.collapsed .icon-span:hover {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 	}
 
 	.active-collapsed {
-		background-color: #eaecff;
-		border-radius: 50%;
-		color: #472aff;
+		background-color: var(--spi-color-primary-lighter);
+		border-radius: var(--spi-rounded-full);
+		color: var(--spi-color-primary-base);
 	}
 
 	.active-collapsed:hover {
-		background-color: #eaecff;
+		background-color: var(--spi-color-primary-lighter);
 		cursor: default;
 	}
 
@@ -103,7 +99,7 @@
 	.active-collapsed .icon-span,
 	.active-expanded .item-name-span,
 	.active-collapsed .item-name-span {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 	}
 
 	.item.collapsed:focus,
@@ -115,8 +111,8 @@
 
 	.item.collapsed:focus-visible .icon-span,
 	.item.expanded:focus-visible {
-		box-shadow: 0 0 0 2px #472aff;
-		background-color: #eaecff;
+		box-shadow: 0 0 0 var(--spi-border-2) var(--spi-color-primary-base);
+		background-color: var(--spi-color-primary-lighter);
 		outline: none;
 	}