@softwareone/spi-sv5-library 1.14.4 → 1.15.1

package/dist/components/accordion/Accordion.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <aside class="accordion-container" class:border={!disableBorder}>
-	<div class="accordion-content">
+	<div class="accordion-content spi-text-regular-2">
 		<section class="header" class:is-open={isOpen}>
 			<button
 				type="button"
@@ -24,12 +24,15 @@
 				onclick={toggleAccordion}
 				aria-label={isOpen ? 'Collapse accordion' : 'Expand accordion'}
 			>
-				<span class="material-icons-outlined icon-span" class:rotate={isOpen}>
+				<span
+					class="material-icons-outlined icon-span spi-text-regular-5"
+					class:rotate={isOpen}
+				>
 					keyboard_arrow_right
 				</span>
 			</button>
 
-			<h2 class="header-title">{title}</h2>
+			<h2 class="header-title spi-text-semibold-2">{title}</h2>
 		</section>
 
 		{#if isOpen}
@@ -44,18 +47,10 @@
 	.accordion-container {
 		width: 100%;
 		height: 100%;
-
-		--border-color: #e0e5e8;
-		--color: #472aff;
-	}
-
-	.accordion-content {
-		font-size: 14px;
-		line-height: 20px;
 	}
 
 	.content {
-		padding: 10px 10px 0 28px;
+		padding: 10px 10px 0 var(--spi-size-7);
 	}
 
 	.is-open {
@@ -63,18 +58,14 @@
 	}
 
 	.header {
-		gap: 16px;
+		gap: var(--spi-size-4);
 		display: inline-flex;
 	}
 
-	.header-title {
-		font-weight: 600;
-	}
-
 	.border {
-		border: 1px solid var(--border-color);
-		border-radius: 8px;
-		padding: 32px;
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		border-radius: var(--spi-rounded-lg);
+		padding: var(--spi-size-8);
 	}
 
 	.button {
@@ -88,9 +79,9 @@
 	}
 
 	.icon-span {
-		color: var(--color);
-		font-size: 20px;
-		transition: transform 0.2s ease-in-out;
+		line-height: normal;
+		color: var(--spi-color-primary-base);
+		transition: transform var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.icon-span.rotate {

package/dist/components/announcement/Announcement.svelte

@@ -25,14 +25,14 @@
 		></div>
 		<section class="announcement-panel" transition:fade={{ duration: 250 }}>
 			<header class="panel-header">
-				<h1 class="panel-title">Announcements</h1>
+				<h1 class="panel-title spi-text-medium-4">Announcements</h1>
 				<button
 					class="close-button"
 					onclick={toggleAnnouncement}
 					aria-label="Close announcements"
 					type="button"
 				>
-					<span class="material-icons close-icon">close</span>
+					<span class="material-icons close-icon spi-text-regular-6">close</span>
 				</button>
 			</header>
 
@@ -45,16 +45,21 @@
 									{#if !announcement.isRead}
 										<div class="unread-indicator"></div>
 									{/if}
-									<span class="material-icons-outlined announcement-icon"
+									<span
+										class="material-icons-outlined announcement-icon spi-text-regular-6"
 										>notifications_active</span
 									>
 								</div>
 								<div class="item-info">
-									<h2 class="item-title">{announcement.title}</h2>
-									<time class="item-date">{announcement.createdAt}</time>
+									<h2 class="item-title spi-text-medium-2">
+										{announcement.title}
+									</h2>
+									<time class="item-date spi-text-regular-1"
+										>{announcement.createdAt}</time
+									>
 								</div>
 							</div>
-							<p class="item-message">{announcement.message}</p>
+							<p class="item-message spi-text-regular-2">{announcement.message}</p>
 						</article>
 						<hr class="item-divider" />
 					{/each}
@@ -64,8 +69,10 @@
 					<span class="material-icons-outlined empty-icon icon-gradient">hide_source</span
 					>
 					<div class="empty-content">
-						<p class="empty-title">No announcements yet</p>
-						<p class="empty-description">Check back later for updates</p>
+						<p class="empty-title spi-text-bold-4">No announcements yet</p>
+						<p class="empty-description spi-text-regular-2">
+							Check back later for updates
+						</p>
 					</div>
 				</div>
 			{/if}
@@ -75,17 +82,13 @@
 
 <style>
 	.announcement-wrapper {
-		--color-primary: #472aff;
-		--color-gray-100: #e0e5e8;
-		--color-gray-200: #6b7180;
-
 		position: relative;
 	}
 
 	.announcement-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;
@@ -96,16 +99,16 @@
 		z-index: 40;
 		right: -260px;
 		top: 30px;
-		background: #ffffff;
-		border-radius: 8px;
+		background: var(--spi-color-surface-default);
+		border-radius: var(--spi-rounded-lg);
 		display: flex;
 		width: 500px;
 		max-height: 800px;
-		padding: 24px;
+		padding: var(--spi-size-6);
 		flex-direction: column;
 		align-items: flex-start;
-		gap: 16px;
-		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+		gap: var(--spi-size-4);
+		box-shadow: var(--spi-shadow-dropdown);
 	}
 
 	.panel-header {
@@ -113,14 +116,11 @@
 		justify-content: space-between;
 		align-items: center;
 		width: 100%;
-		border-bottom: 1px solid var(--color-gray-100);
-		padding-bottom: 24px;
+		border-bottom: var(--spi-border-1) solid var(--spi-color-border-default);
+		padding-bottom: var(--spi-size-6);
 	}
 
 	.panel-title {
-		font-weight: 500;
-		font-size: 18px;
-		line-height: 28px;
 		margin: 0;
 	}
 
@@ -134,8 +134,7 @@
 	}
 
 	.close-icon {
-		font-size: 24px;
-		color: #000000;
+		color: var(--spi-color-text-primary);
 	}
 
 	.announcements-list {
@@ -147,48 +146,47 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
-		padding: 16px;
-		gap: 16px;
+		padding: var(--spi-size-4);
+		gap: var(--spi-size-4);
 	}
 
 	.announcement-item.unread {
-		background-color: #eaecff;
-		border-radius: 16px;
+		background-color: var(--spi-color-primary-lighter);
+		border-radius: var(--spi-rounded-2xl);
 	}
 
 	.item-header {
 		display: flex;
 		align-items: center;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		width: 100%;
 	}
 
 	.icon-container {
 		position: relative;
 		display: flex;
-		width: 40px;
-		height: 40px;
-		padding: 8px;
+		width: var(--spi-size-10);
+		height: var(--spi-size-10);
+		padding: var(--spi-size-2);
 		align-items: center;
 		justify-content: center;
-		border-radius: 20px;
-		border: 1px solid var(--color-gray-100);
-		background: #ffffff;
+		border-radius: var(--spi-rounded-full);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		background: var(--spi-color-surface-default);
 	}
 
 	.unread-indicator {
 		position: absolute;
 		left: -5px;
 		top: 40%;
-		width: 8px;
-		height: 8px;
-		background-color: var(--color-primary);
-		border-radius: 50%;
+		width: var(--spi-size-2);
+		height: var(--spi-size-2);
+		background-color: var(--spi-color-primary-base);
+		border-radius: var(--spi-rounded-full);
 	}
 
 	.announcement-icon {
-		color: #000000;
-		font-size: 24px;
+		color: var(--spi-color-text-primary);
 	}
 
 	.item-info {
@@ -197,38 +195,31 @@
 	}
 
 	.item-title {
-		font-weight: 500;
-		font-size: 14px;
-		line-height: 20px;
 		margin: 0;
 	}
 
 	.item-date {
-		font-size: 12px;
-		line-height: 16px;
-		color: var(--color-gray-200);
+		color: var(--spi-color-text-muted);
 		text-align: left;
 	}
 
 	.item-message {
-		font-size: 14px;
-		line-height: 20px;
 		margin: 0;
 	}
 
 	.item-divider {
 		width: 100%;
 		border: 0;
-		border-top: 1px solid var(--color-gray-100);
-		margin: 16px 0;
+		border-top: var(--spi-border-1) solid var(--spi-color-border-default);
+		margin: var(--spi-size-4) 0;
 	}
 
 	.empty-state {
 		display: flex;
 		flex-direction: column;
-		padding: 24px;
+		padding: var(--spi-size-6);
 		align-items: center;
-		gap: 24px;
+		gap: var(--spi-size-6);
 		width: 100%;
 	}
 
@@ -241,28 +232,29 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 		width: 100%;
 	}
 
 	.empty-title {
-		font-size: 18px;
-		line-height: 28px;
-		font-weight: 700;
 		word-break: break-word;
 		margin: 0;
 	}
 
 	.empty-description {
-		font-size: 14px;
-		line-height: 20px;
 		word-break: break-word;
 		text-align: center;
 		margin: 0;
 	}
 
 	.icon-gradient {
-		background: linear-gradient(226deg, #00c9cd 0%, #472aff 33%, #392d9c 67%, black 100%);
+		background: linear-gradient(
+			226deg,
+			#00c9cd 0%,
+			var(--spi-color-primary-base) 33%,
+			var(--spi-color-primary-dark) 67%,
+			black 100%
+		);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 		background-clip: text;

package/dist/components/avatar/Avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	type BackgroundColor = '#472AFF' | '#25282D';
-	type TextColor = '#333840' | '#FFFFFF';
+	type BackgroundColor = 'primary' | 'dark';
+	type TextColor = 'dark' | 'white';
 
 	interface Props {
 		text: string;
@@ -9,12 +9,17 @@
 		keepOrder?: boolean;
 	}
 
-	let {
-		text,
-		backgroundColor = '#25282D',
-		textColor = '#FFFFFF',
-		keepOrder = false
-	}: Props = $props();
+	let { text, backgroundColor, textColor, keepOrder = false }: Props = $props();
+
+	const avatarBackgroundColor: Record<BackgroundColor, string> = {
+		primary: '--spi-color-primary-base',
+		dark: '--spi-color-neutral-darkest'
+	};
+
+	const avatarTextColor: Record<TextColor, string> = {
+		dark: '--spi-color-neutral-darkest',
+		white: '--spi-color-text-inverse'
+	};
 
 	const avatarSrc = (text: string): string => {
 		const defaultValue = 'SO';
@@ -33,15 +38,28 @@
 </script>
 
 <svg class="avatar" width="40" height="40" viewBox="0 0 40 40">
-	<circle cx="20" cy="20" r="20" fill={backgroundColor} />
-	<text x="20" y="25" text-anchor="middle" font-size="14" font-weight="normal" fill={textColor}>
+	<circle
+		cx="20"
+		cy="20"
+		r="20"
+		fill={backgroundColor
+			? `var(${avatarBackgroundColor[backgroundColor]})`
+			: `var(${avatarBackgroundColor.dark})`}
+	/>
+	<text
+		x="20"
+		y="25"
+		text-anchor="middle"
+		class="spi-text-regular-2"
+		fill={textColor ? `var(${avatarTextColor[textColor]})` : `var(${avatarTextColor.white})`}
+	>
 		{avatarSrc(text)}
 	</text>
 </svg>
 
 <style>
 	.avatar {
-		min-width: 40px;
-		min-height: 40px;
+		min-width: var(--spi-size-10);
+		min-height: var(--spi-size-10);
 	}
 </style>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,5 +1,5 @@
-type BackgroundColor = '#472AFF' | '#25282D';
-type TextColor = '#333840' | '#FFFFFF';
+type BackgroundColor = 'primary' | 'dark';
+type TextColor = 'dark' | 'white';
 interface Props {
     text: string;
     backgroundColor?: BackgroundColor;

package/dist/components/button/Button.svelte

@@ -29,7 +29,7 @@
 
 <button
 	{@attach clearButtonFocus}
-	class={['btn', `btn-${variant}-${variantColor}`, loading && 'loading']}
+	class={['btn', 'spi-text-regular-2', `btn-${variant}-${variantColor}`, loading && 'loading']}
 	disabled={loading || disabled}
 	{...props}
 >
@@ -55,27 +55,24 @@
 			</svg>
 		</span>
 	{/if}
-	<span class="content" class:hidden={loading}>
+	<span class="content" class:content--loading={loading}>
 		{@render children()}
 	</span>
 </button>
 
 <style>
 	.btn {
-		padding: 8px 16px;
-		border-radius: 8px;
+		padding: var(--spi-size-2) var(--spi-size-4);
+		border-radius: var(--spi-rounded-lg);
 		border: none;
-		font-size: 14px;
 		font-style: normal;
-		font-weight: 400;
-		line-height: 20px;
 		display: inline-flex;
 		position: relative;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
-	.content.hidden {
-		opacity: 0;
+	.content.content--loading {
+		opacity: var(--spi-opacity-0);
 	}
 
 	.spinner-wrapper {
@@ -93,19 +90,19 @@
 
 	.btn-primary-primary .spinner,
 	.btn-primary-danger .spinner {
-		color: #fff;
+		color: var(--spi-color-text-inverse);
 	}
 
 	.btn-secondary-primary .spinner,
 	.btn-outline-primary .spinner,
 	.btn-outline-none-primary .spinner {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 	}
 
 	.btn-secondary-danger .spinner,
 	.btn-outline-danger .spinner,
 	.btn-outline-none-danger .spinner {
-		color: #dc182c;
+		color: var(--spi-color-danger-base);
 	}
 
 	@keyframes spin {
@@ -124,105 +121,105 @@
 
 	.btn:focus:not(:disabled):not(.loading),
 	.btn:focus-visible:not(:disabled):not(.loading) {
-		box-shadow: 0px 0px 0px 3px #959bff;
+		box-shadow: var(--spi-shadow-focus-primary);
 		outline: none;
 	}
 
 	.btn:disabled:not(.loading) {
-		background: #e0e5e8;
+		background: var(--spi-color-surface-muted);
 		border: none;
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 		cursor: not-allowed;
 	}
 
 	.btn-primary-primary {
-		background: #472aff;
-		color: #fff;
+		background: var(--spi-color-primary-base);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.btn-primary-primary:hover:not(:disabled),
 	.btn-primary-primary:focus:not(:disabled) {
-		background: #3520bf;
+		background: var(--spi-color-primary-dark);
 	}
 
 	.btn-secondary-primary {
-		background: #eaecff;
-		color: #472aff;
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 	}
 
 	.btn-secondary-primary:hover:not(:disabled),
 	.btn-secondary-primary:focus:not(:disabled) {
-		background: #472aff;
-		color: #fff;
+		background: var(--spi-color-primary-base);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.btn-outline-primary {
-		border: 1px solid #472aff;
-		background: #fff;
-		color: #472aff;
+		border: var(--spi-border-1) solid var(--spi-color-primary-base);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-primary-base);
 	}
 
 	.btn-outline-primary:hover:not(:disabled),
 	.btn-outline-primary:focus:not(:disabled) {
-		background: #eaecff;
+		background: var(--spi-color-primary-lighter);
 	}
 
 	.btn-outline-none-primary {
 		border: none;
-		background: #fff;
-		color: #472aff;
-		padding: 8px;
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-primary-base);
+		padding: var(--spi-size-2);
 	}
 
 	.btn-outline-none-primary:hover:not(:disabled),
 	.btn-outline-none-primary:focus:not(:disabled) {
-		background: #e0e5e8;
+		background: var(--spi-color-surface-muted);
 	}
 
 	.btn-primary-danger {
-		background: #dc182c;
-		color: #fff;
+		background: var(--spi-color-danger-base);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.btn-primary-danger:hover:not(:disabled),
 	.btn-primary-danger:focus:not(:disabled) {
-		background: #bb1425;
+		background: var(--spi-color-danger-dark);
 	}
 
 	.btn-secondary-danger {
-		background: #fce8ea;
-		color: #dc182c;
+		background: var(--spi-color-danger-lighter);
+		color: var(--spi-color-danger-base);
 	}
 
 	.btn-secondary-danger:hover:not(:disabled),
 	.btn-secondary-danger:focus:not(:disabled) {
-		background: #dc182c;
-		color: #fff;
+		background: var(--spi-color-danger-base);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.btn-outline-danger {
-		border: 1px solid #dc182c;
-		background: #fff;
-		color: #dc182c;
+		border: var(--spi-border-1) solid var(--spi-color-danger-base);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-danger-base);
 	}
 
 	.btn-outline-none-danger {
 		border: none;
-		background: #fff;
-		color: #dc182c;
-		padding: 8px;
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-danger-base);
+		padding: var(--spi-size-2);
 	}
 
 	.btn-outline-none-danger:hover:not(:disabled),
 	.btn-outline-none-danger:focus:not(:disabled),
 	.btn-outline-danger:hover:not(:disabled),
 	.btn-outline-danger:focus:not(:disabled) {
-		background: #fce8ea;
+		background: var(--spi-color-danger-lighter);
 	}
 
 	.btn-outline-none-primary:disabled:not(.loading),
 	.btn-outline-none-danger:disabled:not(.loading) {
 		background: transparent;
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 	}
 </style>

package/dist/components/card/Card.svelte

@@ -16,14 +16,12 @@
 <style>
 	.card {
 		width: 100%;
-		background: #fff;
-		border-radius: 16px;
-		box-shadow:
-			0px 1px 16px rgba(107, 113, 128, 0.1),
-			0px 1px 3px rgba(107, 113, 128, 0.2);
+		background: var(--spi-color-surface-default);
+		border-radius: var(--spi-rounded-2xl);
+		box-shadow: var(--spi-shadow-card);
 	}
 
 	.padding {
-		padding: 24px;
+		padding: var(--spi-size-6);
 	}
 </style>