@softwareone/spi-sv5-library 1.14.4 → 1.15.1

package/dist/components/controls/textarea/TextArea.svelte

@@ -55,6 +55,7 @@
 			bind:value
 			class={[
 				'form-textarea',
+				'spi-text-regular-2',
 				props.disabled && 'form-textarea-disabled',
 				props.readonly && 'form-textarea-readonly',
 				!resize && 'form-textarea-no-resize'
@@ -67,18 +68,18 @@
 		<div class="form-footer">
 			<div class="form-messages">
 				{#if description}
-					<p class="form-message form-message-description">
+					<p class="form-message form-message-description spi-text-regular-1">
 						{description}
 					</p>
 				{/if}
 				{#if errorMessage}
-					<p class="form-message form-message-error">
+					<p class="form-message form-message-error spi-text-regular-1">
 						{Array.isArray(errorMessage) ? errorMessage[0] : errorMessage}
 					</p>
 				{/if}
 			</div>
 			{#if maximumCharactersAllowed}
-				<div class={['form-character-count', isOverLimit && 'error']}>
+				<div class={['form-character-count', 'spi-text-regular-1', isOverLimit && 'error']}>
 					{currentTextLength} / {maximumCharactersAllowed}
 				</div>
 			{/if}
@@ -90,23 +91,17 @@
 	.form-container {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
-		font-size: 14px;
-		line-height: 20px;
-	}
-
-	.form-message {
-		font-size: 12px;
+		gap: var(--spi-size-2);
 	}
 
 	.form-textarea-wrapper {
 		position: relative;
 		display: flex;
 		width: 100%;
-		border-radius: 8px;
-		border: 1px solid #6b7180;
-		background: #fff;
-		transition: all 0.2s ease-in-out;
+		border-radius: var(--spi-rounded-lg);
+		border: var(--spi-border-1) solid var(--spi-color-border-strong);
+		background: var(--spi-color-surface-default);
+		transition: all var(--spi-duration-normal) var(--spi-ease-in-out);
 		overflow: hidden;
 	}
 
@@ -114,24 +109,22 @@
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper:focus-within {
-		border-color: #472aff;
+		border-color: var(--spi-color-border-focus);
 	}
 
 	.form-textarea-wrapper:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+		box-shadow: var(--spi-shadow-focus-primary);
 	}
 
 	.form-textarea {
-		font-size: 14px;
-		line-height: 20px;
 		display: flex;
 		width: 100%;
-		min-height: 80px;
-		padding: 8px 16px;
+		min-height: var(--spi-size-20);
+		padding: var(--spi-size-2) var(--spi-size-4);
 		border: none;
-		border-radius: 8px;
-		color: #000;
-		transition: all 0.2s ease-in-out;
+		border-radius: var(--spi-rounded-lg);
+		color: var(--spi-color-text-primary);
+		transition: all var(--spi-duration-normal) var(--spi-ease-in-out);
 		font-family: inherit;
 	}
 
@@ -140,15 +133,14 @@
 	}
 
 	.form-textarea-disabled {
-		background-color: #f3f4f6;
-		border-color: #d1d5db;
-		color: #6b7180;
+		background-color: var(--spi-color-disabled-bg);
+		border-color: var(--spi-color-disabled-border);
 		cursor: not-allowed;
 	}
 
 	.form-textarea-readonly {
-		background-color: #f9fafb;
-		border-color: #d1d5db;
+		background-color: var(--spi-color-surface-subtle);
+		border-color: var(--spi-color-border-default);
 		cursor: default;
 	}
 
@@ -158,41 +150,40 @@
 
 	.form-textarea::placeholder,
 	.form-textarea:disabled::placeholder {
-		color: #6b7180;
-		opacity: 1;
+		color: var(--spi-color-text-placeholder);
+		opacity: var(--spi-opacity-100);
 	}
 
 	.form-footer {
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.form-messages {
 		display: flex;
 		flex-direction: column;
-		gap: 4px;
+		gap: var(--spi-size-1);
 		flex: 1;
 	}
 
 	.form-message-error {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.form-message-description {
-		color: #6b7180;
+		color: var(--spi-color-text-muted);
 	}
 
 	.form-character-count {
-		font-size: 12px;
-		color: #6b7180;
 		white-space: nowrap;
+		color: var(--spi-color-text-muted);
 		flex-shrink: 0;
 	}
 
 	.form-character-count.error {
-		color: #dc2626;
+		color: var(--spi-color-text-danger);
 	}
 
 	.form-textarea-wrapper.error,
@@ -200,11 +191,11 @@
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper.error:focus-within {
-		border-color: #dc2626;
+		border-color: var(--spi-color-border-danger);
 	}
 
 	.form-textarea-wrapper.error:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+		box-shadow: var(--spi-shadow-focus-danger);
 	}
 
 	.form-textarea-wrapper.success,
@@ -212,27 +203,27 @@
 			:has(.form-textarea:read-only)
 		),
 	.form-textarea-wrapper.success:focus-within {
-		border-color: #008556;
+		border-color: var(--spi-color-border-success);
 	}
 
 	.form-textarea-wrapper.success:focus-within {
-		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+		box-shadow: var(--spi-shadow-focus-success);
 	}
 
 	.form-textarea-wrapper:has(.form-textarea:disabled),
 	.form-textarea-wrapper:has(.form-textarea:read-only) {
-		border-color: #d1d5db !important;
+		border-color: var(--spi-color-disabled-border) !important;
 		box-shadow: none !important;
 	}
 
 	@media (prefers-contrast: high) {
 		.form-textarea {
-			border-width: 2px;
+			border-width: var(--spi-border-2);
 		}
 
 		.form-textarea:focus {
-			outline: 2px solid;
-			outline-offset: 2px;
+			outline: var(--spi-border-2) solid;
+			outline-offset: var(--spi-border-2);
 		}
 	}
 

package/dist/components/controls/toggle/Toggle.svelte

@@ -32,7 +32,7 @@
 			role="switch"
 		/>
 		<div class={['toggle-slider', checked && 'checked', disabled && 'disabled']}>
-			<span class="material-icons-outlined toggle-icon">
+			<span class="material-icons-outlined toggle-icon spi-text-regular-1">
 				{#if checked}
 					done
 				{:else}
@@ -49,7 +49,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 8px;
+		gap: var(--spi-size-2);
 	}
 
 	.container.vertical {
@@ -64,90 +64,88 @@
 	.container.vertical label {
 		order: 1;
 	}
+
 	.toggle-container {
 		position: relative;
 	}
 
 	.toggle-input {
 		position: absolute;
-		opacity: 0;
+		opacity: var(--spi-opacity-0);
 		width: 0;
 		height: 0;
 	}
 
 	.toggle-slider {
 		display: flex;
-		width: 40px;
+		width: var(--spi-size-10);
 		padding: 2px;
 		align-items: center;
-		border-radius: 12px;
-		border: 2px solid #6b7180;
-		background: #fff;
-		transition: all 0.3s ease;
+		border-radius: var(--spi-rounded-xl);
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-surface-default);
+		transition: all var(--spi-duration-slow) var(--spi-ease-default);
 		cursor: pointer;
 	}
 
 	.toggle-slider.checked {
 		justify-content: flex-end;
-		border: 2px solid #472aff;
-		background: #472aff;
+		border: var(--spi-border-2) solid var(--spi-color-primary-base);
+		background: var(--spi-color-primary-base);
 	}
 
 	.toggle-slider.disabled {
 		cursor: not-allowed;
-		border: 2px solid #6b7180;
-		background: #e0e5e8;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-surface-muted);
 	}
 
 	.toggle-slider.disabled.checked {
-		border: 2px solid #6b7180;
-		background: #6b7180;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-neutral-dark);
 	}
 
 	.toggle-icon {
 		display: flex;
-		font-size: 12px;
-		flex-direction: column;
 		align-items: center;
-		justify-content: center;
-		border-radius: 16px;
-		border: 2px solid #6b7180;
-		background: #6b7180;
-		color: #fff;
-		transition: all 0.3s ease;
-		cursor: pointer;
+		line-height: normal;
+		border-radius: var(--spi-rounded-2xl);
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-neutral-dark);
+		color: var(--spi-color-text-inverse);
+		transition: all var(--spi-duration-slow) var(--spi-ease-default);
 	}
 
 	.toggle-slider.checked .toggle-icon {
-		border: 2px solid #fff;
-		background: #fff;
-		color: #472aff;
+		border: var(--spi-border-2) solid var(--spi-color-surface-default);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-primary-base);
 	}
 
 	.toggle-slider.disabled .toggle-icon {
 		cursor: not-allowed;
-		border: 2px solid #6b7180;
-		background: #6b7180;
-		color: #fff;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-dark);
+		background: var(--spi-color-neutral-dark);
+		color: var(--spi-color-text-inverse);
 	}
 
 	.toggle-slider.disabled.checked .toggle-icon {
-		border: 2px solid #fff;
-		background: #fff;
-		color: #6b7180;
+		border: var(--spi-border-2) solid var(--spi-color-surface-default);
+		background: var(--spi-color-surface-default);
+		color: var(--spi-color-neutral-dark);
 	}
 
 	.toggle-container:hover .toggle-slider:not(.disabled).checked {
-		background: #3520bf;
-		border: 2px solid #3520bf;
+		background: var(--spi-color-primary-dark);
+		border: var(--spi-border-2) solid var(--spi-color-primary-dark);
 	}
 
 	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) {
-		border: 2px solid #434952;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-darker);
 	}
 
 	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) .toggle-icon {
-		border: 2px solid #434952;
-		background: #434952;
+		border: var(--spi-border-2) solid var(--spi-color-neutral-darker);
+		background: var(--spi-color-neutral-darker);
 	}
 </style>

package/dist/components/delete-confirmation/DeleteConfirmation.svelte

@@ -71,7 +71,7 @@
 	.content {
 		display: flex;
 		flex-direction: column;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		width: 100%;
 	}
 

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

@@ -12,7 +12,7 @@
 	}: Props = $props();
 </script>
 
-<footer class="footer-section">
+<footer class="footer-section spi-text-regular-2">
 	<a href={homeUrl} title="Home">
 		<FooterLogo />
 	</a>
@@ -39,21 +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;
+		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/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>